Div, кажется, не распространяется на высоте

Question

Таким образом, у меня есть это:

HTML:

<div id="main"> 
    <div id="top"></div> 
    <div id="mid"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
    <div id="bottom"> 
    </div> 
</div> 

CSS:

#main { 
    height: auto; 
    width: 300px; 
    background: black; 
} 
#top { 
    height: 1px; 
    width: 300px; 
    background: yellow; 

} 
#mid { 
    height: auto; 
    width: 300px; 
} 
.item { 
    height: 20px; 
    width: 90px; 
    color: red; 
    float: left; 
    margin-left: 2px; 
    margin-top: 2px; 
} 
#bottom { 
    width: 300px; 
    height: 1px; 
    background: yellow; 
} 

Demo

Это в основном sup как навигационное меню. Это упрощенная версия того, что есть на самом сайте, но функциональность мудрая - вот как это должно работать.

#main является основной оболочкой всего, что означает, что оно содержит все элементы. По этой причине он имеет высоту: авто; так как высота будет зависеть от количества элементов в ней.

#top - это просто пустой div с другим цветом фона, который будет выступать в качестве верхней границы (на сайте это изображение, следовательно, потребность в div).

Затем #mid будет содержать все фактические элементы (да, вы можете утверждать, что это необязательно необходимо, но присутствие не влияет на проблему).

Тогда .item будет фактическим списком элементов внутри всего объекта. Теперь, если вы попробуете код, вы увидите, что во всем родительском div только 3 элемента будут вписываться в горизонтальную строку и начиная с 4-го элемента он начнет новую строку; то, если вы добавите больше, он снова добавит новую строку, начиная с 7-го.

Пока все хорошо, но проблема в том, что divs #main и #mid не увеличиваются по высоте после первой строки; они полностью игнорируют любые строки, созданные ниже, несмотря на высоту: auto; , Почему это так и как это исправить?

Answer 1

Я работал с demo и сделал working update

Что я изменился:

• я удалил height: auto; из #main, потому что это уже стандартное значение и не нужно устанавливать
• Я добавил так называемое clearfix^{(google it)} до clear плавающие предметы.Если вы плаваете элемент, он удаляется из обычного документооборота, так это необходимо

Добавлено CSS: (Clearfix source)

.cf:after{ 
    content: ""; 
    display: table; 
    clear: both; 
} 

Добавлено HTML:

<!-- added class="cf" --> 
<div id="mid" class="cf"> 

Answer 2

попробуйте его добавив! Важно после свойства css. например: #mid { height: auto !important; width: 300px !important; }

Answer 3

Вы должны нажать высоту div, объявляя элемент в div с ясными: both; Это означает, что высота контейнера div совпадает с высотой всех перемещаемых элементов. Здесь у вас есть:

http://jsfiddle.net/hitaboy/cXaws/4/

<div id="main"> 
    <div id="top"></div> 
    <div id="mid"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="clearer"></div> 
    </div> 
    <div id="bottom"></div> 
</div>