在 div 周围环绕文本答案

【问题标题】：Wrapping text around a div在 div 周围环绕文本
【发布时间】：2012-05-16 21:37:26
【问题描述】：

我有这样的布局：

Header div
divLeft divRight
Footer div

divLeft 是一堆文本，而 divRight 是一个包含一些内容的 div。 divLeft 要长得多，我希望文本在 divright 下换行。现在它只是制作两列，并且在 divRight 下有很多空白。帮助？谢谢！

【问题讨论】：

标签： css html css-float

【解决方案1】：

将divRight 放入divLeft 并使其浮动。

试试这个：

CSS

<style type="text/css">
#primary, #header, #footer {
    float: left;
    width: 100%;
}

#secondary {
   float: right;
      width: 200px; /* or whatever width you want */
}
</style>

HTML

<div id="header">
</div>
<div id="primary">
   <div id="secondary">
      <p>Put your content here that goes on the right</p>
   </div>
   <p>Put your content here<br /> 
      that goes on the left<br /> 
      and should wrap under the right-hand column</p>
</div>
<div id="footer">
</div>

【讨论】：

【解决方案2】：

您可以向右浮动 divRight。这应该允许左 div 包裹在右文本之下。

编辑：您还需要 divRight 在 divLeft 中，如 Donut 所述。

【讨论】：

【解决方案3】：

将 divRight 放在 divLeft 中并为其赋予以下属性：

.divRight {
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline;
}

【讨论】：

【解决方案4】：

我有一个很好的解决方案；看一下例子here的源码。

【讨论】：