предотвращение прохождения фоновых элементов блока за плавающим контентом

Question

У меня есть элемент блока, плавающий слева, с различными элементами блока справа от него.Эти неплавающие элементы имеют фоновые изображения, которые отображаются за всплывающим элементом.Я хотел бы предотвратить это.Обычно я бы достигал этого с помощью margin-left для элементов, но я бы хотел, чтобы элементы, расположенные ниже плавающего элемента, использовали всю ширину контейнера (в противном случае это будет выглядеть как два столбца с пробелами ниже).плавающий элемент).

Я не могу заранее определить, какие элементы будут находиться ниже плавающего элемента, так как он может иметь различную высоту (или вообще отсутствовать) в зависимости отстраницы.

Спасибо за чтение!

Answer 1

Один из вариантов - применить overflow:hidden к каждому из нормальных элементов:

http://jsfiddle.net/sdleihssirhc/y2kG8/

IE6 может иметь проблемы с этим ... 7 тоже ... Я могу 'не помню точно, кто и как сосет.Но также предоставление этим элементам zoom:1 должно исправить это.

Answer 2

Вы пробовали использовать display:inline-block для плавающего элемента? т.е. - http://jsfiddle.net/jordanlewis/krbpR/

Answer 3

Это как можно ближе. Я думаю, то, что вы просите, может оказаться невозможным.

Демонстрация в реальном времени

<style type="text/css">
#wrap {
    background-color: #EEE;
    overflow: auto;
}
.floated {
    border: 1px solid #F00;
    float: left;
    padding: 5px;
    height: 60px;
    width: 20%;
}
.element {
    background-color: #DDD;
    border: 1px dashed #000;
    display: inline-block;
    float: left;
    margin: 5px 0;
    padding: 2px;
    width: 75%;
}
</style>

<div id="wrap">
    <div class="floated">floated element</div>
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
</div>