使用CSS将Div拆分为2列 [英] Split Div Into 2 Columns Using CSS

问题描述

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

I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:

<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的背景颜色。我已经尝试从各种网站的其他代码似乎不能翻译到我的结构。

If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.

感谢任何帮助！

推荐答案

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

When you float those two divs, the content div collapses to zero height. Just add

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

这将强制内容div包围两个内部浮动div。

after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.

这篇关于使用CSS将Div拆分为2列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！