Bootstrap

Arkadaşlar yardıma ihtiyacım var.

İstediğim iki şey var.

1 - Bir tane div olsun istiyorum, bu divin içerisine atıyorum 5 tane içerik ekledim yanyana, 6 içerik sayfanın yan sınırına gelince otomatik aşağı satıra eklensin istiyorum.
2- Bir de bir div olsun, içine görsel eklediğimde o divin yüksekliğini alsın. Yani bunu .divadi img {} şeklinde yapabiliyorum zaten ama ben bunu tek tek girmek yerine otomatik olarak divin height'ını alsın istiyorum bununla ilgili bilgi verebilirseniz de güzel olur.

Yani ben bunlara 2 gündür kafa patlatıyorum, display flex yapınca içerikler sınıra gelince bir tane daha eklediğimde o zaman içerikleri küçültüp onu da sığdırıyor ben onu istemiyorum. 1100 px genişlik varsa 5 tane 220px width div sığsın, 6. div eklendiğinde otomatik alt satıra eklesin. Beynim durma noktasına geldi yani neyi denediysem olmuyor.

1. İSTEĞİN CEVABI:

<div class="container">
<div class="row">
<div class="col-md-3">1. eleman</div>
<div class="col-md-3">1. eleman yan</div>
<div class="col-md-3">1. eleman yan</div>
<div class="col-md-3">1. eleman yan</div>
<div class="col-md-3">5. aşağıya gelir.</div>

</div>
</div>

2. İSTEK:

img nesnesinin yükseklik ve genişliğini 100% yaparsan üstündeki divin yüksekliği ve genişliğini alır.

hocam sıkıntı da tam burada başlıyor işte bu col mdleri kullanınca, sanki fixed bi görüntü varmış gibi oluyor yani nası diyeyim. bak resim ekledim bu senin yazı yazdığın yerlere bu resimleri de küçülttüm. aradaki boşluğu görüyor musun. işte ben diyorum ki bunlar böyle kendi aralarında 15px marginli gelsin ben ne kadar küçültürsem o kadar sığsın. arada böyle boşluk olmaısn

Yaptığınız dosyaları iletir misiniz? Onun üzerinden düzenleme yapıp göndereyim.

Hocam merhaba,

1. Aşağı düşmesini istediğin divlerin kapsayıcısına şu özelliği verin -> flex-wrap: wrap;
2. .divadi{ height:250px } .divadi img{ width:100%;}

Hepsi bu hocam

https://hastebin.com/opisuwated.xml

Düzenleyin:
.row .col-md-3 img {
width: 100%;
}

1. olarak söylediğinizi hepsini ele alan dive vereceğiz değil mi hocam,. yani şöyle

<div class="birinci">
<div class="ikinci">xx</div>
</div>

yani birinci divine vereceğiz bunu.



hocam onu yapınca hepsi yanyana geldi de benim istediğim o değil... ben diyorum ki bu .col-md-3 lerin bir width i olsun benim belirlediğim. atıyorum 30px genişliğimi var. yanyana 8 tane ssığsın bunlardan. 50 yaptım genişliği yanyana 6 tane sığsın o yani benim istediğim

evet hocam şu şekilde olacak.
<style>
.kapsar{
display: flex;
flex-wrap:wrap;
}
.ictekiDiv{
width:20%;
}
</style>

<div class="kapsar">
<div class="ictekiDiv"></div>
<div class="ictekiDiv"></div>
</div>