拆分使用CSS的2列

我一直在试图分裂成两列使用CSS，但我还没有设法得到它的工作。 我的基本结构如下：

<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> 

如果我试图浮动右和左divs到他们各自的位置（左和右），似乎忽略内容div的背景颜色。 和其他代码，我已经尝试从各种网站似乎不能转化为我的结构。

谢谢你的帮助！

Answer 1

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

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

之后的#right div但在内容div。 这将迫使内容div围绕两个内部浮动div。

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> 

Answer 3

另一种方法是添加overflow:hidden; 到浮动元素的父元素。

overflow：hidden将使元素增长以适应浮动元素。

这样，它可以在CSS中完成，而不是添加另一个html元素。

Answer 4

最灵活的方法来做到这一点：

 #content::after { display:block; content:""; clear:both; } 

这与将该元素附加到#content完全相同：

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

但没有实际添加元素。 :: after被称为伪元素。 这是比添加overflow:hidden;更好的唯一原因overflow:hidden; 到#content是，你可以有绝对定位的子元素溢出，仍然可见。 此外，它将允许框阴影仍然可见。

Answer 5

无论出于什么原因，我从来都不喜欢清理方法，所以我依靠浮点数和百分比宽度来处理这样的事情。

这里有一些简单的例子：

 #content { overflow:auto; width: 600px; background: gray; } #left, #right { width: 40%; margin:5px; padding: 1em; background: white; } #left { float:left; } #right { float:right; } 

如果你把一些内容，你会看到它的作品：

 <div id="content"> <div id="left"> <div id="object1">some stuff</div> <div id="object2">some more stuff</div> </div> <div id="right"> <div id="object3">unas cosas</div> <div id="object4">mas cosas para ti</div> </div> </div> 

你可以在这里看到它： http : //cssdesk.com/d64uy

Answer 6

让孩子div inline-block ，他们将并排位置：

 #content { width: 500px; height: 500px; } #left, #right { display: inline-block; width: 45%; height: 100%; } 

看演示

Answer 7

垂直划分一个div的最佳方法 –

 #parent { margin: 0; width: 100%; } .left { float: left; width: 60%; } .right { overflow: hidden; width: 40%; } 

Answer 8

在这里最好的回答是问题211383

这些天，任何有自尊心的人都应该使用所谓的“微清晰”方法来清理浮筒。

Answer 9

花车不影响stream量。 我倾向于做的是添加一个

 <p class="extro" style="clear: both">possibly some content</p> 

在“包装div”（在这里是内容）的末尾。 我可以通过说这样一个段落来certificate这一点。 另一种方法是使用clearfix CSS：

 #content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #content { display: inline-block; } /* \*/ * html #content { height: 1%; } #content { display: block; } /* */ 

评论的诡计是跨浏览器的兼容性。

Answer 10

1. 在父DIV中使字体大小等于零。

2. 设置每个子DIV的宽度％。

    #content { font-size: 0; } #content > div { font-size: 16px; width: 50%; } 

*在Safari中，您可能需要设置49％才能使其正常工作。

Answer 11

如果你把这个（如宽度：50％），并设置float：left为左列，float：right为right column，那么将列分为两列是非常容易的，只需指定列的宽度。

Answer 12

没有给出的答案回答原来的问题。

问题是如何使用CSS分隔成2列。

所有上面的答案实际上embedded2 div到一个单独的div为了模拟2列。 这是一个坏主意，因为你不能以任何dynamic的方式将内容stream入2列。

所以，而不是上面，使用一个单独的div被定义为包含2列使用CSS，如下所示…

 .two-column-div { column-count: 2; } 

将上面的类分配给一个div，它实际上将其内容stream入2列。 您可以进一步确定边距之间的差距。 根据div的内容，您可能需要混合使用单词中断值，以便您的内容不会在列之间切断。