使用 css 将文本环绕在 div 周围（在文本中间）答案

【问题标题】：Wrapping text around a div (in the middle of the text) using css使用 css 将文本环绕在 div 周围（在文本中间）
【发布时间】：2014-09-12 15:41:47
【问题描述】：

如何在 div 周围环绕文本。使用 css 将 div 留在文本正文的中间？

草图：

text text text text 
text text text text 
text text text text 
text text text text 
+-------+ text text 
+       + text text 
+  div  + text text 
+       + text text 
+-------+ text text 
text text text text 
text text text text 
text text text text 
text text text text

注意：从 HTML 的角度来看，div 位于文本之前。

<div></div> [... text...]

【问题讨论】：

标签： css html text css-float

【解决方案1】：

其他答案是正确的，因为您需要浮动<div>（例如div { float: left; margin: 10px 0 10px 10px; }，但是请记住，为了让<div> 出现在中间你的内容，它将会有在内容本身。

当使用这样的浮点数时，您只需要记住您必须在要环绕它的内容之前插入<div>。所以，在这种情况下，有一段文字，插入<div>，然后再有几个段落。当您浮动<div> 时，它会出现在您的内容中间。

【讨论】：

+1 完全同意（我希望它在文本中间）。为此，我必须将文本分成 2 个块。使用 php 很容易，但我想要一个干净的 css 解决方案。当包含丰富的内容时，剪切文本是非常有问题的。好像不可能吧？
让 div 完全出现在内容之前，但让它出现在内容的中间，使用纯 CSS - 不，这是不可能的。这不是页面流的工作方式。可能有一种方法可以使用 javascript 在 DOM 中移动 div，但这会变得很混乱。

【解决方案2】：

你需要浮动你的 div。例如，您可以像这样设置 div 的样式：

float:left;
margin:10px; //To leave a gap around the div

【讨论】：

类似的东西，但我不想将 div 放在文本的中间。 div 在文本之前：<div>text...
我认为这是不可能的，我认为这样做的唯一方法是使用绝对位置，但这将允许文本进入 div 下方

【解决方案3】：

您需要的是float property。试试下面这个例子：

.youDiv {
float: left;
}

【讨论】：