В настоящее время у меня есть проблема, связанная с поведением плавающих предметов и контейнеров, не обертывающих их.
У меня есть список предметов, которые переносят плавающие элементы. Это очень упрощенная версия:
<ul class="items">
<li><img src="" />Text here</li>
<li><img src="" />More text</li>
</ul>
CSS выглядит примерно так:
ul.items li
{
display: block;
border: 1px solid pink;
}
ul.items li img
{
float: left;
}
Ранее я добавил «очищающий» элемент внизу каждого элемента списка, чтобы развернуть его, чтобы обернуть вокруг изображения. Это эквивалентно версии CSS Тони Аслетта . Пример можно увидеть здесь .
К сожалению, у меня есть меню, плавающее слева от списка, что означает, что добавление очистки создает огромное пространство под первым элементом. Это упомянуто на приведенной выше странице в разделе Слово предупреждения (это важно) . Эффект можно увидеть здесь .
Я следовал альтернативному решению, которое нашел из Пол О'Брайен , используя свойство переполнения. Это работает как шарм. К сожалению, в дополнение к меню слева, у каждого элемента списка было меню, плавающее в правом верхнем углу. С overflow: auto эти предметы выталкиваются наружу. Это можно увидеть здесь . Разметка похожа на это:
<ul class="items">
<li>
<div class="floaty">*</div>
<div class="item">
<div class="img"></div>Text here
</div>
</li>
<li>
<div class="floaty">*</div>
<div class="item">
<div class="img"></div>More text
</div>
</li>
</ul>
Есть ли способ заставить элемент 'floaty' остаться внутри элемента 'item' с помощью этого метода? Кроме того, есть ли другое решение, которое я мог бы упустить?