CSS Float/Clear Puzzle(竞争 float )

Question

我拍了一张图片并将其切成三 block ，然后将它们向右浮动，让文字围绕它们流动。 HTML 看起来像这样:

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

在我添加侧边栏并将其 float 到图像的右上方之前，它工作正常，就像这样...

<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 个图像周围添加一个容器并将其 float 。

看到这个 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;
}