Просто для будущих вариантов;)
отаю над сайтом, который использует две колонки внутри контейнера. Контейнер имеет белый фон, который должен растягиваться до нижней части столбца, поэтому я используюСвятой Грааль метод для этого.
Однако оба столбца должны располагаться так, чтобы часть их превышала белый фон (этот пример использует фиксированную высоту, которая должна быть жидкой). Насколько я знаю, это можно сделать только установив видимый переполнение, но это нарушит равную высоту столбцов.
Как мне исправить это с помощью как можно меньшего количества дополнительных элементов?
Ответы на вопрос(2)
inline-block элементы ..
Css
.container{
width:300px;
background-color:#ccc;
margin:0 auto;
border:1px solid red;
}
.container > div{
width:150px;
display:inline-block;
vertical-align:top;
}
.inner{
background-color:#666;
margin-top:10px;
width:130px;
}
.left .inner{
margin-left:-10px;
}
.right .inner{
margin-right:-10px;
margin-left:auto;
}
HTML
<div class="container">
<div class="left">
<div class="inner">left 1st inner panel</div>
<div class="inner">left 2nd inner panel</div>
</div><div class="right">
<div class="inner">right 1st inner panel</div>
<div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
</div>
</div>
Другой ответ уже сработал, но +1 за хорошее решение. К сожалению, я все еще должен поддерживать IE7 (слава богу, нет 6), который не может хорошо обрабатывать встроенные блоки.
@ Стефан, слава богу, что IE6 наконец-то вышел из картины ... Что касается IE7 и
inline-block посмотри наbrunildo.org/test/InlineBlockLayout.html Просто для будущих вариантов;)Решение Вопроса
<br style="clear:both" /> перед закрывающим тегом для#container.
Вы можете изменить это на<br class="clearfix" /> а также.clearfix{clear:both} если хочешь.
Вау, это было так просто? Я всегда старался избегать пустых элементов clearfix (в 99% случаев есть более элегантное решение), но это, очевидно, исключение из этого правила. Спасибо!