Question

我拍了一张图片并将其切成三片，然后将它们漂浮到右边，让文字在它们周围流动。 HTML看起来像这样：

<img src="" style="float: right;">
<img src="" style="float: right; clear: right;">
<img src="" style="float: right; clear: right;">

它工作正常，直到我添加了一个侧边栏并将其浮动到我的图像上方，就像这样......

<div class="Sidebar" style="float: right;">Text, Menus, etc.</div>
<img src="" style="float: right;">
<img src="" style="float: right; clear: right;">
<img src="" style="float: right; clear: right;">

现在第一张图片（没有清晰的样式）仍然保留在原来的位置，但其他两张图片在侧边栏下面不见了。

有没有人知道解决这个问题的方法？

Answer 1

您应该在3张图片周围添加一个容器并将其向右浮动。

请参阅 FIDDLE

代码：

<div class="Sidebar" style="float: right;">Text, Menus, etc.</div>
<div style="float: right;">
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" style="float: right;">
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" style="float: right; clear: right;">
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" style="float: right; clear: right;">
</div>

编辑：

要获得相同的输出，您可以使用更简单的CSS（没有不推荐的内联样式）：

<强> FIDDLE

HTML：

<div>Text, Menus, etc.</div>
<div>
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" />
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" />
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" />
</div>

CSS：

div{
    float: right;
}
img{
    display:block;
}

Answer 2

在div之后添加此内容以完全清除浮动。

<br clear="all">

CSS Float / Clear Puzzle（竞争花车）

2 个答案: