wewnętrzne lewicowo-floating div nie rozwinąć kontener div pionowo

Question

Mam div kontenera z następujących cech:

#cat_container{ 
margin:0; 
padding:5px; 
border:1px solid red; 
min-height:200px; 
} 

Wewnątrz znajdują się liczne lewo pływających div. Problem polega na tym, że nie zmuszają rozdzielającego się elementu div do rozwijania się w dół, zamiast tego po prostu zachodzą na siebie i pozostają poza granicą div kontenera.

Lewy pływających div:

.cat_wrap{ 
border: 1px solid #000; 
width:100px; 
min-height:120px; 
margin:0 10px 5px 0; 
padding:0; 
float:left; 
} 

Jeśli biorę lewy pływak obecnie, zawierające div nie rozszerzają się w pionie, jak powinno to zrobić. Więc w jaki sposób mogę uzyskać, aby wewnętrzne elementy div były unoszone w lewo, ale również pionowo rozwijal pojemnik div?

Answer 1

należy ustawić nadmiar dla głównego elementu div. overflow: auto; to zmusi pojemnik div do rozszerzenia i dostosowania się do treści.

#cat_container{ 
    margin:0; 
    padding:5px; 
    border:1px solid red; 
    min-height:200px; 
    overflow: auto; 
    height: auto !important; 
} 

Answer 2

Jest to typowy problem i rozwiązany za pomocą rozwiązania "clearfix". Ustawianie przepełnienia będzie rozwiązać ten problem, jednak istnieją lepsze rozwiązania, jak następuje:

.mydiv:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 
* html .mydiv    { zoom: 1; } /* IE6 */ 
*:first-child+html .mydiv { zoom: 1; } /* IE7 */ 

Głównym punktem tego rozwiązania jest to, aby wywołać własność div hasLayout. Na szczęście wystarczy, aby IE 6/7 ustawił zoom na 1, aby to uruchomić. Nowoczesne przeglądarki obsługujące pseudo element :after mogą używać pierwszej instrukcji, która jest czystsza i nie wpływa na właściwość przepełnienia.

Należy pamiętać, że należy unikać używania instrukcji !important, jak sugerowano we wcześniejszej odpowiedzi, ponieważ nie jest to dobre css. Ponadto nie pozwoli ci kontrolować wysokości div, jeśli chcesz i nie robi nic, aby rozwiązać problem.

Answer 3

To jest . Dobrym sposobem na to jest użycie właściwości flex.

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

Następnie element dziecko może pozbyć się starego magicznego float nieruchomości.

Zapoznaj się z tym JSFiddle, aby zobaczyć efekt.

Uwaga: kiedy Wysokości dzieci elementy nie są jednolite, flex sposób będą zachowywać się inaczej przy okazji float. Ale trudno powiedzieć, który z nich jest poprawny.