Jak mogę się upewnić, że DIV rozciąga się w celu dopasowania do jego zawartości?

Question

mam ten kod HTML ze stołem:

<div 
    class="currentDesignDiv" 
    style="margin-bottom:5px;"> 
    <div> 
    <img 
     alt="Thumbnail" 
     src="http://www.propertyware.com/templates/ 
     <bean:write name="currentTemplate" property="primaryKey"/> 
     /thumb.gif"/> 
    </div> 
    <div> 
    <table> 
     <tr> 
     <th>Your Current Design: </th> 
     <td>Template #: 
      <bean:write name="currentTemplate" property="primaryKey"/> 
     </td> 
     </tr> 
     <tr> 
     <th>Last Updated: </th> 
     <td> 
      <bean:write name="currentTemplate" property="modifiedByAsString"/> 
     </td> 
     </tr> 
     <tr> 
     <th>Total Pages: </th> 
     <td> 
      <bean:write name="numberOfPages"/> 
     </td> 
     </tr> 
    </table> 
    </div> 

Będąc zaprojektowany przez tego CSS:

.currentDesignDiv{ 
    background-color:#e7e7e7; 
    border:1px solid #9c9c9c; 
    padding:5px; 
    width:100%; 
    min-width:860px; 
} 
.currentDesignDiv div{ 
    float:left; 
    width:33%; 
} 
.currentDesignDiv div table{ 
    font-size:9pt; 
    text-align:left; 
    margin:17px; 
} 
.currentDesignDiv div:first-child img{ 
    margin:17px; 
    width:80px; 
} 

wygląda OK w moim wielkim ekranie, ale kiedy zmieni się moim małym monitorze po prawej najbardziej div, który ma w sobie obraz, pływa poza rodzicem div. Czy ktoś ma na to rozwiązanie?

Answer 1

ustawić

overflow: auto; 

na zewnętrznym div. To powinno spowodować rozwinięcie się div twojego rodzica, nawet jeśli jego dzieci mają właściwość float. (IE ma kilka problemów z tym, ale może być ustalona przez jakiegoś dopełnienia)

Answer 2

Przepełnij także div rodzica.

Oznacza to, że elementy podrzędne, które są pływające, nie będą z niego pływać.

Answer 3

Może spróbuj dając zewnętrznej div tego css ...

display: inline-block;

Ponieważ elementy pływające nie mają własnego układu, zewnętrzny element div działa po prostu jako pusty div, nie rozciągając się, aby dopasować się do znajdujących się w nim elementów.

Wykonanie zewnętrznego bloku wbudowanego div spowoduje, że wewnętrzni divy zajmą pewną rzeczywistą przestrzeń w zewnętrznym div.

Answer 4

zwykle podać:

overflow: hidden;

Wystąpił problem, gdy przepuszczam przepełnienie: auto; czasami zewnętrzny element div może wyświetlać pasek przewijania.