высота установка с высоты детей его элементов

Question

это style.css:

.widget{ 
    width: 100%; 
    border-bottom-style: solid; 
    height: auto; 
} 
.item{ 
    float: right; 
    padding: 3px; 
    width: 110px; 
    height: 80px; 
} 

и это index.html:

<div class="widget" id="reports"> 
        <div class="item" id="km"></div> 
        <div class="item" id="km"></div> 
        <div class="item" id="km"></div> 
        <div class="item" id="km"></div> 
</div> 

, но моя проблема в том, что в результате " виджет "имеют 0 высоту. в чем проблема, я хочу, чтобы высота «виджета» наследовала от своих детей.

Answer 1

В нижней части вашего:

   <div class="item" id="km"></div> 
       <div class="item" id="km"></div> 
       <div class="item" id="km"></div> 
       <div class="item" id="km"></div> 

Добавить

   <div class="clear" style="clear: both;"></div> 

Результат будет выглядеть так:

<div class="widget" id="reports"> 
       <div class="item" id="km"></div> 
       <div class="item" id="km"></div> 
       <div class="item" id="km"></div> 
       <div class="item" id="km"></div> 
       <div class="clear" style="clear: both;"></div> 
</div> 

Конечно, вы можете добавить стиль для ясном класс в таблица стилей. Вам нужно очистить любые плавающие divs befoure, ваш родительский div будет распознавать высоту.