使用 CSS 将 Div 分成两列

Question

我一直在尝试使用 CSS 将一个 div 分成两列，但我还没有设法让它工作。我的基本结构如下：

 <div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

如果我试图将左右 div 浮动到它们各自的位置（右和左），它似乎忽略了内容 div 的背景颜色。我从各种网站尝试过的其他代码似乎无法转换为我的结构。

谢谢你的帮助！

原文由 PF1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您浮动这两个 div 时，内容 div 折叠为零高度。只需添加

<br style="clear:both;"/>

在 #right div 之后但在内容 div 内。这将强制内容 div 围绕两个内部浮动 div。

原文由 Rob Van Dam 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

这对我很有用。我将屏幕分成两半：20% 和 80%：

 <div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

原文由 Navish 发布，翻译遵循 CC BY-SA 3.0 许可协议