DIV, wysokość i unosić

Question

mam unosić czerwone div div na niebieskim jak na zdjęciu

<div class="blue"> 
    <div style="height: 40px; float: left"></div> 
    <div style="height: 40px; float: left"></div> 
    <div style="height: 40px; float: left"></div> 

    <div style="height: 40px; float: left"></div> 
    <div style="height: 40px; float: left"></div> 
    <div style="height: 40px; float: left"></div> 
</div> 

chcę zrobić, więc niebieski div mieć wysokość na czerwonym DIV. Kiedy usuwam float, jest OK.

Answer 1

Musisz dodać wyświetlacz: table-cell; lub przepełnienie: ukryte; do twojego niebieskiego diva. Da to rodzicowi wysokość jego dzieci.

Demo

tak:

.blue{ 
    overflow:hidden; 
    //or 
    //display:table-cell; 
} 

sidenote - Twoje DIV potrzeba szerokość gdy są pływające.

Masz również opcję, aby twój div z klasą niebieski float. Ale może to spowodować niepożądane zachowanie w twoim dokumencie (jeśli div nie powinien się unosić).

Answer 2

prostu unosić niebieską Gr:

.blue{ 
    float: left; 
} 

Będzie on następnie rozwinąć się wziąć na wysokości swoich dzieci.

Jeśli pływających nie jest opcją, chciałbym ustawić display do inline-block aby zachowywać się w taki sam sposób jak unosił elementu.

.blue{ 
    display: inline-block; 
} 

referencyjny: https://developer.mozilla.org/en-US/docs/CSS/display

Answer 3

Jest to bardzo powszechny problem znany jako 'clearfix' problemu. Więcej informacji można znaleźć (na przykład) tutaj: Div rendering incorrectly in Firefox

Krótko mówiąc, należy dodać klasę .clearfix do ciebie rodzic (niebieski) div, który wygląda mniej więcej tak:

.clearfix { 
    *zoom: 1; 
} 
.clearfix:before, 
.clearfix:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
    } 
&:after { 
    clear: both; 
} 

Ten jest „pożyczony "z Twittera Bootsrap, istnieje wiele alternatyw. Dlaczego i jak to działa, sugeruję użycie "clearfix".

Należy pamiętać, że istnieją inne "poprawki", takie jak praca z inline blocks, dodawanie overflow: hidden lub nawet wyświetlanie jako table-cell. Chociaż mogą działać w pewnej sytuacji, prawie wszystkie mają inne efekty uboczne lub nie są w pełni zgodne z przeglądarkami, więc powinny być używane z ostrożnością.

Answer 4

Jeśli trzeba coś czyste i bardziej dynamiczny, spróbuj tego:

<div class="blue"> 
<div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

I tak:

.blue {background-color: blue;text-align: center;display: inline-block;padding: 5px;} 
.blue > div > div {background-color: red; width:100px; height: 50px; margin: 10px;display: inline-block;} 

Example on jsfiddle

Answer 5

Inną opcją bez kompatybilności we wszystkich opcji przeglądarek ale bez potrzeby float: left

.blue{ 
 
    background-color:blue; 
 
    overflow:hidden; 
 
    width: 140px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
} 
 

 
.blue div{ 
 
    background-color:red; 
 
    margin: 2.5px 0 2.5px 0; 
 
    width:40px; 
 
}

<div class="blue"> 
 
    <div style="height: 40px;"></div> 
 
    <div style="height: 40px;"></div> 
 
    <div style="height: 40px;"></div> 
 

 
    <div style="height: 40px;"></div> 
 
    <div style="height: 40px;"></div> 
 
    <div style="height: 40px;"></div> 
 
</div>