Question

我目前在浮动物品的行为和没有包裹它们的容器方面存在问题。

我有一个包装浮动元素的项目列表。这是一个非常简化的版本：

<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;
}

之前我在每个列表项的底部添加了一个“清除”项，以展开它以包围图像。这相当于Tony Aslett's CSS version。可以看到一个例子here。

不幸的是，我在列表的左侧有一个浮动菜单，这意味着添加清除会在第一个项目下面创建一个巨大的空间。上面的页面中提到了警示词（这很重要）。效果可见here。

我使用overflow属性从Paul O'Brien找到了另一种解决方案。这就像一个魅力。不幸的是，除了左边的菜单外，每个列表项都有一个漂浮在右上角的菜单。使用overflow: auto，这些项目会被推送到外面。这可以看作here。标记类似于：

<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'元素中？或者，我可能会缺少另一种解决方案吗？

Answer 1

我不是100％确定整个用例在这里是什么，但对于.floaty元素，使用position代替float是否合理？

基本上添加：

ul.items li { position: relative; }
div.floaty { float: none; position: absolute; top: 0; right: 0; }

Fiddle

制作非浮动元素环绕浮动元素

1 个答案: