v2.5.2
Giriş yap

Front-end Yardım

ibrahimali
676 defa görüntülendi

Merhaba Selamlar

Benim şöyle bir problemim var.
Mesala her hangi bir üründe fiyat yazılmasza yeri boş burakıyorum.
Bu da tasarımda sorun yaratıyor. Örnek resimdeki gibi.
Hemde mesala Ürün adı biraz böyük olursada aynı sorunu yaşıyorum
Nasıl hepsini aynı hizada tuta bilirim? Altadkı SƏBƏTƏ Butonları, isimler hep aynı hizada olsun istiyorumm

Cevap yaz
Cevaplar (4)
kartal
1362 gün önce

Çok kolay..
Resmin altında ki ürün info divi bütün özellikler dolu olduğunda kaç px ise o ölçüyü sabit değer olarak ata ürün info divine.
Resim divini dispay flex ayarla align-items:center ve justify-content: center; yap.

onlywhatchess
1363 gün önce

flex-direction ile bunu yapabilirsin.


<div class="product-wrapper"> <!-- Ürünlerin tutulduğu kapsayıcı başlangıç -->
    <div class="product"> <!-- 1. Ürün -->
        <div class="product-head"> <!-- Ürün Resmi -->
            <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="product-body"> <!-- Ürün İsmi -->
            Product Name
        </div>
        <div class="product-footer"> <!-- Sepete Ekle Butonu -->
            <button>Sepete ekle</button>
        </div>
    </div> <!-- 1. Ürün bitiş -->
    <div class="product"> <!-- 2. Ürün başlangıç -->
        <div class="product-head"> <!-- Ürün Resmi -->
            <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="product-body">
            <!-- Ürünün yüksekliği diğerinden farklı olsun diye <br> yazdım -->
            Product Name <br><br><br><br><br><br><br>
        </div>
        <div class="product-footer"> <!-- Sepete Ekle Butonu -->
            <button>Sepete ekle</button>
        </div>
    </div> <!-- 2. Ürün bitiş -->
</div> <!-- Ürünlerin tutulduğu kapsayıcı bitiş -->

.product-wrapper{ 
    display: grid; /* Ürünler yan yana gelsin diye */
    grid-template-columns: 1fr 1fr; /* Kaç adet ürünün yan yana geliceği belirler, kaç ürün yan yana gelsin istiyorsak o kadar 1fr yazmamız gerekiyor. */
}
.product{
    display: flex;
    flex-direction: column;
}
.product-footer{
    margin-top: auto; 
    /* 
    * sepete ekle butonunun içinde olduğu bu div ürünün yüksekliği ne kadar olursa olsun onun daima en altta kalmasını sağlar.
    * flex-direction: column; özelliği olmadan kullanılmıyor.
    */
}

CSS Flex ile İlgili Her şey Tayfun Erbilen
Ek olarak bunlara da bir bakmanı tavsiye ederim
Medium CSS Grid Layout
Mozilla CSS Grid Layout

ibrahimali
1363 gün önce

@onlywhatchess Resim yukledim kodlar template den geldigi icin cok karisik ona gore atmadim

onlywhatchess
1363 gün önce

Resim veya kodlar falan olsaydı iyiydi.