Html 使用 CSS 将 Div 分成 2 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1964297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Split Div Into 2 Columns Using CSS
提问by PF1
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:
我一直在尝试使用 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>
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 的背景颜色。我从各种网站尝试过的其他代码似乎无法转换为我的结构。
Thanks for any help!
谢谢你的帮助！
采纳答案by Rob Van Dam
When you float those two divs, the content div collapses to zero height. Just add
当您浮动这两个 div 时，内容 div 会折叠到零高度。只需添加
<br style="clear:both;"/>
after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.
在#right div 之后但在内容div 内。这将强制内容 div 包围两个内部浮动 div。
回答by Navish
This works good for me. I have divided the screen into two halfs: 20% and 80%:
这对我很有用。我将屏幕分为两半：20% 和 80%：
<div style="width: 20%; float:left">
#left content in here
</div>
<div style="width: 80%; float:right">
#right content in there
</div>
回答by tybro0103
Another way to do this is to add overflow:hidden;to the parent element of the floated elements.
另一种方法是添加overflow:hidden;到浮动元素的父元素。
overflow:hidden will make the element grow to fit in floated elements.
overflow:hidden 将使元素增长以适应浮动元素。
This way, it can all be done in css rather than adding another html element.
这样，一切都可以在 css 中完成，而不是添加另一个 html 元素。
回答by tybro0103
The most flexible way to do this:
最灵活的方式来做到这一点：
#content::after {
display:block;
content:"";
clear:both;
}
This acts exactly the same as appending the element to #content:
这与将元素附加到 #content 完全相同：
<br style="clear:both;"/>
but without actually adding an element. ::after is called a pseudo element. The only reason this is better than adding overflow:hidden;to #content is that you can have absolute positioned child elements overflow and still be visible. Also it will allow box-shadow's to still be visible.
但没有实际添加元素。::after 被称为伪元素。这比添加overflow:hidden;到 #content更好的唯一原因是您可以让绝对定位的子元素溢出并且仍然可见。它也将允许 box-shadow 仍然可见。
回答by Rodney P. Barbati
None of the answers given answer the original question.
给出的答案都没有回答原始问题。
The question is how to separate a div into 2 columns using css.
问题是如何使用 css 将 div 分成 2 列。
All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.
以上所有答案实际上都将 2 个 div 嵌入到单个 div 中，以模拟 2 列。这是一个坏主意，因为您将无法以任何动态方式将内容流入 2 列。
So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...
所以，而不是上面的，使用单个 div 定义为包含使用 CSS 的 2 列，如下所示......
.two-column-div {
column-count: 2;
}
assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.
将上面的作为一个类分配给一个 div，它实际上会将其内容流入 2 列。您还可以进一步定义边距之间的间隙。根据 div 的内容，您可能需要弄乱分词值，以便您的内容不会在列之间被分割。
回答by Rodney P. Barbati
For whatever reason I've never liked the clearing approaches, I rely on floats and percentage widths for things like this.
无论出于何种原因，我从不喜欢清除方法，我依赖浮点数和百分比宽度来处理这样的事情。
Here's something that works in simple cases:
这是在简单情况下有效的东西：
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
If you put some content in you'll see that it works:
如果您放入一些内容，您会发现它有效：
<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>
You can see it here: http://cssdesk.com/d64uy
你可以在这里看到它：http: //cssdesk.com/d64uy
回答by Oriol
回答by Dexter
I know this post is old, but if any of you still looking for a simpler solution.
我知道这篇文章很旧，但如果你们中的任何人仍在寻找更简单的解决方案。
#container .left,
#container .right {
display: inline-block;
}
#container .left {
width: 20%;
float: left;
}
#container .right {
width: 80%;
float: right;
}
回答by UberNeo
Best way to divide a div vertically --
垂直划分 div 的最佳方式——
#parent {
margin: 0;
width: 100%;
}
.left {
float: left;
width: 60%;
}
.right {
overflow: hidden;
width: 40%;
}
回答by Mohammad Usman
You can use flexboxto control the layout of your div element:
您可以使用flexbox来控制 div 元素的布局：
* { box-sizing: border-box; }
#content {
background-color: rgba(210, 210, 210, 0.5);
border: 1px solid #000;
padding: 0.5rem;
display: flex;
}
#left,
#right {
background-color: rgba(10, 10, 10, 0.5);
border: 1px solid #fff;
padding: 0.5rem;
flex-grow: 1;
color: #fff;
}<div id="content">
<div id="left">
<div id="object1">lorem ipsum</div>
<div id="object2">dolor site amet</div>
</div>
<div id="right">
<div id="object3">lorem ipsum</div>
<div id="object4">dolor site amet</div>
</div>
</div>