CSS Float nie rozciąga Div Wysokość

Mam ten problem przez długi czas podczas pracy z HTML/CSS i Floats.CSS Float nie rozciąga Div Wysokość

Na obrazku widać pole dziobu, które jest unoszone w lewo, ponieważ jest wiele takich skrzynek. Wewnątrz pudełka mam listę <UL>. Elementy listy <li> są również przesunięte w lewo.

Jak widać na obrazku, elementy listy nie powodują, że Box Div jest wewnątrz Expand. Próbowałem kilku rzeczy bez powodzenia i miałem nadzieję, że ktoś z większym doświadczeniem może pomóc? Nie mogę ustawić stałej wysokości w polu DIV, ponieważ liczba ikon jest zawsze inna i musi zostać rozwinięta, aby je poprawić.

enter image description here

żywo demo: http://jsfiddle.net/jasondavis/u5HXu/

<div class="module-box"> 
    <div class="module-box-title"> 
     <h4><i class="icon-cogs"></i>Admin Settings</h4> 
     <div class="tools"> 
      <a href="#" class="collapse">-</a> 
     </div> 
    </div> 
    <div class="module-box-body" style="display: block;"> 


     <ul> 
      <li> 
       <a href="#"> 
        <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0"> 
        <span class="module-icon password_assistant"></span> 
       </a><br> 
       <a href="#">Change<br>Password</a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0"> 
        <span class="module-icon password_assistant"></span> 
       </a><br> 
       <a href="#">Change<br>Password</a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0"> 
        <span class="module-icon password_assistant"></span> 
       </a><br> 
       <a href="#">Change<br>Password</a> 
      </li> 
     </ul> 


    </div> 
</div>

CSS

/* Modules homepage */ 
.module-box { 
    margin: 0px 0px 25px 25px; 
    padding: 0px; 
    float: left; 
    width: 464px; 
} 

.module-box-title { 
    margin-bottom: 0px; 
    padding: 8px 10px 2px 10px; 
    border-bottom: 1px solid #eee; 
    color: #fff !important; 
    background-color: #333; 
    height: 51px; 
    line-height: 45px; 
    border-radius: 3px 3px 0 0; 
} 

.module-box-title h4 { 
    display: inline-block; 
    font-size: 18px; 
    font-weight: 400; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 7px; 
} 

.module-box-title .tools { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
    margin-top: 6px; 
    float: right; 
} 
.module-box-title .tools a { 
    font-size: 31px; 
    color: #fff; 
    text-decoration: none; 
    line-height: 29px; 
} 

.module-box-body { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-top: 0; 
    padding: 10px; 
    clear: both; 
} 

.module-box-body a { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 11px; 
    color: #888; 
    text-decoration: none; 
} 

.module-box-body li { 
    float: left; 
    margin: 0 12px 0 0; 
    list-style: none; 
}

Źródło

2013-02-27 JasonDavis

Trzeba wyczyścić za pomocą pływaków clearfix lub rozliczających element.

Sposób nr 1 clearfix

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    *zoom: 1; 
}

Następnie dodać klasę na elemencie zawierającym

<div class="module-box-body clearfix" style="display: block;">

http://jsfiddle.net/u5HXu/8/

Sposób nr 2 Clearing Element

.clear { 
    clear: both; 
}

Następnie dodaje się następujący kod HTML po elementach pływających.

<div class="clear"></div>

http://jsfiddle.net/u5HXu/9/

Źródło

2013-02-27 21:41:48 Jrod

** Uwaga: ** Metoda # 2 jest bardziej kompatybilna z różnymi przeglądarkami (starsze wersje), ale również mniej pożądana, ponieważ dodaje HTML, który nie ma żadnej użyteczności semantycznej. – animuson

Znana metoda nr 1: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ http://nicolasgallagher.com/micro-clearfix-hack/ – Jrod

Spróbuj stosowania overflow:auto do pojemnika, ten, którego wysokość chcesz zmienić rozmiar na podstawie wysokości jego zawartość (The płynęły pozycji).

Dodałbym link jsfiddle, ale ostatnio nie działał w ogóle. :/

Źródło

2013-02-27 21:41:58 Madbreaks

Możesz użyć sztuczki overflow: hidden na kontenerze nadrzędnym (..module-box-body);) naprawia wszystko.

http://jsfiddle.net/teddyrised/ct6gr/

Źródło

2013-02-27 21:42:35 Terry

Dziękuję - dlaczego to działa? –

@wrongstars Trudno to wyjaśnić w kategoriach laika, ale zasadniczo użycie 'overflow: hidden' ustanawia nowy kontekst przepływu bloku, który zmusza pojemnik nadrzędny do" rozpoznania "i całkowitego zaizolowania wewnętrznego elementu pływającego. http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem – Terry

@ Terry, stary, właśnie tego szukałem, to niedorzeczne, jak prosta jest ta odpowiedź, aby rozwiązać problem. Czy jesteś magikiem? – Dan

zmienić .module-box-body li do

.module-box-body li { 
    display: inline-block; 
    margin: 0 12px 0; 
    list-style: none; 
}

Updated fiddle.

Źródło

2013-02-27 21:44:05 hjpotter92

CSS Float nie rozciąga Div Wysokość

Odpowiedz

Powiązane problemy