无法围绕 css 浮动（div 浮动到/围绕图像） - [关闭]答案

【问题标题】：Can't wrap my mind around css floats (divs floatup to / around an image) - [closed]无法围绕 css 浮动（div 浮动到/围绕图像） - [关闭]
【发布时间】：2012-11-21 05:35:56
【问题描述】：

图片被拉进来，然后是帖子。我希望帖子漂浮在图像旁边并填充右侧的空间。我已经尝试了图像浮动/左、帖子浮动/左或右、显示：inline-block 的各种组合（我也拉了 h3 只是为了弄乱它，没关系）。

我感觉这与帖子 div 的宽度有关，因为当我第一篇帖子的文字很少时，它会浮动到缩略图的垂直版本（已加载），但如果帖子有一大段文字，算了。

那么我错过了什么。 :) 丹克。

【问题讨论】：

在图片前加上h3标签并设置.homefloat { width: 50%; }
@Andy - 您根本不需要移动 h3 标记。
@Shauna 我假设 OP 想要图片上方的标题，移动 h3 标签比使用绝对定位或负边距更好
@Andy - 很公平，尽管我注意到 OP 从未提及任何关于当前图片旁边的 h3 的内容。

标签： css image html css-float

【解决方案1】：

你是对的，它确实与你的 homeFloat div 的宽度有关。

默认情况下，块级元素将使其自身与容器一样宽。当它们漂浮时，这会将它们推到其他容器下。为了让它们浮动在其他项目旁边，您需要指定一个width（或max-width），使得homeFloat + image + padding 等于或小于容器的宽度。

编辑： 另外，请确保所有内容都正确包装在元素中。 <p> 标签会像您正在寻找的那样环绕浮动图像，因此只需对您的 HTML 进行一些修改即可。

【讨论】：

因此，没有真正的解决方案可以让有多少 div 漂浮在图像旁边，而那些没有进行切割并停留在图像下方的 div 占据了该图像下方的全部空间。我试图思考如果所有帖子都只是“文本”而不是在 div 中，那会不会环绕图像。我只提到了 H 标签，因为（并且不记得我是否删除了它）它有一个 clear:both;就可以了。
clear:both 仅适用于带有clear 的元素上方的元素。不，您当前的设置没有解决方案，至少没有 JavaScript。您可能想试验一下您的 HTML 结构，看看哪些内容可以包装，哪些不能包装（例如，我知道普通的 <p> 块将包装您想要的方式）。
我进入并更改了 html 并剥离了所有 DIVS 并在每个帖子条目周围放置了 P 标签，现在它像我想要的那样浮动（很好地围绕着被拉入的动态图像）。但很高兴有人与之聊天。 :) 谢谢。
@KBarnes - 不要忘记将您问题的答案标记为“已接受”，以便人们更愿意帮助您。
我一回复就以为我做到了。我在您的回答旁边有一个大的绿色复选标记，在您的第二个回复旁边有一个向上箭头。