css浮动问题：如何让左浮动环绕右浮动答案

【问题标题】：css floating problem: how to get a left float to wrap around a right floatcss浮动问题：如何让左浮动环绕右浮动
【发布时间】：2011-02-19 03:54:43
【问题描述】：

有一个框，显示包装在一个 div 中的图像，该图像来自一个 4 跨 x 4 高的数据库。图像向左浮动，因此它们会自动换行。但我想在右上角添加一个对象（一个 div）并让图像环绕（所以第一行只有 3 个，之后每行 4 个）。我尝试过使用正确、绝对、相对浮动，但没有任何东西可以正确显示。

有什么建议吗？

编辑（代码）：

我先添加 div 然后添加图像，发生的情况是 div 将原本位于第四个位置的图像推到一边，而不是包裹它。

这是我的目标：

| Image(in div)  Image(in div)   Image(in div)    Div   |
| Image(in div)  Image(in div)   Image(in div)    Image(in div) |
| Image(in div)  Image(in div)   Image(in div)    Image(in div) |
| Image(in div)  Image(in div)   Image(in div)    Image(in div) |

图片：

position:relative;
float:left;
height:200px;
width:200px;

分区：

position:relative;
float:right;
height:200px;
width:200px;

【问题讨论】：

你应该包含示例代码:)
您是否尝试过clear 属性？ w3schools.com/css/pr_class_clear.asp

标签： css

【解决方案1】：

您可以简单地将div 放在所有图像的前面，然后将其浮动到右侧：

#right {
    width: 200px;
    float: right;
}

使用此 HTML：

<div id="right">
    Some text, content. </div>

<img src="http://placehold.it/200x200" alt="" />
<img src="http://placehold.it/200x200" alt="" />
[...]

通常这里不需要浮动 img 元素，因为它们已经是内联元素。在这里看到这个工作：http://jsfiddle.net/wQfAc/

【讨论】：

问题是它们是包装在 div 中的图像（用于标题），那么我将如何使 Image-div 内联？（显示：内联不起作用）
@John 您可以浮动包装 div 元素，也可以浮动它们 - jsfiddle.net/wQfAc/1
在实践中仍然不适合我，但我会弄清楚，因为它显然对你有用。谢谢

【解决方案2】：

如果不查看您的 html 和 css 就很难说，但作为一般提示，您是否尝试过在所有图像之前渲染您首先在 HTML 中浮动的 div？

【讨论】：