Вложенные div с float

Я пытаюсь вложить три div во внешний div. проблема в том, что вложенные div не увеличивают внешний.

CSS выглядит следующим образом:

.page {display: block;  width: 96%;}
.page .left-content {display: inline-block; float:left; width: 15%;}
.page .middle-content {display: inline-block; float:left; width: 70%;}
.page .right-content {display: inline-block; float:left; width: 15%;}

HTML, который я хочу сделать:

<div class="page">
    <div class="left-content">...content...</div>
    <div class="middle-content">...content...</div> 
    <div class="right-content">...content...</div>
</div>

задание цвета фона для класса страницы показывает, что div класса страницы имеет неправильный размер. Как мне решить эту проблему?


html css css-float
person Nachshon Schwartz    schedule 16.02.2011    source источник
comment
Только IE или все браузеры?   -  person Kriem    schedule 16.02.2011

Ответы (4)


arrow_upward
6
arrow_downward

Оболочка должна очищать содержимое DIV.

.page {
    overflow: hidden;
    *zoom: 1; /* for ie6/7 */
}

Никакой дополнительной разметки не требуется. Также ознакомьтесь с методом очистки Аслетта: http://www.positioniseverything.net/easyclearing.html

person madr    schedule 16.02.2011
comment
Хех, это довольно крутой метод, метод, упомянутый в статье. - person Loktar; 16.02.2011

arrow_upward
2
arrow_downward

Волшебное исправление

Стандартный метод создания внешнего вида внешнего контейнера, как бы «закрывающего» вложенный поплавок, заключается в том, чтобы поместить полностью «очищенный» элемент в контейнер последним, что дает эффект «перетаскивания» нижнего края содержащего прямоугольника ниже, чем поплавок.

Таким образом, кажется, что поплавок заключен в контейнер, хотя на самом деле это не так. Код для очищенного поля обычно выглядит примерно так:

<div> <!-- float container -->

  <div style="float:left; width:30%;"><p>Some content</p></div>

  <p>Text not inside the float</p>

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

</div>
person Kriem    schedule 16.02.2011
comment
Я не фанат использования div для очистки, немного дополнительной разметки, чем просто разрыв строки. - person Loktar; 16.02.2011
comment
Разрыв строки фактически добавляет семантику. Хотя не очень. :) Думаю, дело вкуса. - person Kriem; 16.02.2011

arrow_upward
1
arrow_downward

Я добавил clear и убедился, что каждый контент div обнулен margin и padding

http://jsfiddle.net/c4KLc/3/

.page .right-content, .page .left-content, .page .middle-content 
{
    border: none;
    padding: 0; 
    margin: 0;
}

.clear { 
    clear: both; 
    line-height: 0;
}

Если какой-либо из ваших плавающих div имеет стили padding, border или margin, плавающая ширина будет отключена, поскольку вы выполняете% width

person hunter    schedule 16.02.2011
comment
по какой-то причине это не решило мою проблему, хотя я вижу, что это работает в вашем примере - person Nachshon Schwartz; 16.02.2011

arrow_upward
0
arrow_downward

Измените свой html на

<div class="page">
    <div class="left-content">...content...</div>
    <div class="middle-content">...content...</div> 
    <div class="right-content">...content...</div>
    <div style="clear: both;"></div>
</div>
person Thomas    schedule 16.02.2011