CSS 布局将文本放在它旁边而不是下面答案

【问题标题】：CSS Layout places text right next to it instead of belowCSS 布局将文本放在它旁边而不是下面
【发布时间】：2011-05-11 07:22:00
【问题描述】：

我的 CSS 布局有问题，如下所示：

#wrapper { 
 width: 80%;
} 

#content { 
 float: left;
 background: #FFFF00;
 height: 350px;
 width: 70%;
 display: inline;
}

#rightcolumn { 
 background: #EBE3CD;
 height: 350px;
 width: 30%;
 height: 250px;
 float: left;
}

#legendcolumn {
 background: #FF00FF;
 height: 100px;
 width: 30%;
 float: left;
}

我的 HTML 正文如下：

 <div id="wrapper">
  <div id="content">
   Main Content.
  </div>
  <div id="rightcolumn">
   Right Column.
  </div>
  <div id="legendcolumn">
   Here comes the legend.
  </div>
 </div>

 Lorem ipsum dolor sit amet.

不幸的是，文本 lorem ipsum dolor sit amet 放置在布局旁边。但是，我想将文本放在布局的正下方。在不引入新的 div 容器的情况下如何实现这一点？

【问题讨论】：

标签： css layout text placement

【解决方案1】：

浮动和内联内容会导致问题，但您可以使用 The Power of Overflow 进行控制：

#wrapper 
{  
  width: 80%; 
  overflow: auto;  // overflow + float = magic happy land
}

编辑：如果您将border: 1px solid red; 添加到#wrapper，您可以看到为什么 display:block 和 clear:both 不起作用。浮动的后果之一是容器将塌陷到它的非浮动孩子的高度（这里为零）。如果它们引用的元素高度为零，则 Block 和 Clear 的明显影响为零（无论如何，块都会有 - div 本身就是块）。溢出自动克服了这一点。

【讨论】：

谢谢 anakata。这是目前唯一可行的解决方案。 display:block 和 clear:both 都没有帮助。

【解决方案2】：

因为你的#wrapper 设置为只有 80% 的宽度，这些文本元素会尝试用它来填充剩余的 20% 的屏幕。没有新的 div 没有确切的解决方案，但我认为以下可能解决方法：

#wrapper {
    width: 100%;
    padding-right: 20%:
}

【讨论】：

我的错！我忽略了float:left 里面的那些东西。溢出：自动应该是答案。

【解决方案3】：

像这样更新你的 CSS：

#wrapper { 
 width: 80%;
 display: block;
}

【讨论】：

Divs 默认是阻塞的，这不应该改变任何东西。

【解决方案4】：

为什么#wrapper 宽度为 80%？改为 100%。

【讨论】：