CSS 如何并排放置两个 <div> 元素（2 列）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6271021/
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
How can I have two <div> elements side-by-side (2 columns)
提问by Carlos Mu?iz
I would like to have two tags side-by-side as if being two columns.
我想并排放置两个标签，就像是两列一样。
So far I have
到目前为止我有
<div id="wrapper">
<div id="1">text here</div>
<div id="2">text here</div>
<div style="clear:both"></div>
</div>
What I'm having difficulty with is the CSS for the divs. Any help?
我遇到的困难是 div 的 CSS。有什么帮助吗？
回答by Jason McCreary
Check out the floatproperty.
看看float楼盘。
Quick example:
快速示例：
#1, #2 {
float: left;
width: 49%;
}
Check out this beginner tutorial on CSS Floats.
查看这个关于 CSS Floats 的初学者教程。
回答by why.you.and.i
May be you can try:
也许你可以尝试：
div#wrapper {
display: table;
}
div#wrapper div {
display: table-cell;
padding: 5px;
}
or this one:
或者这个：
div#wrapper div {
display: inline-block;
}
回答by patapizza
As a start:
作为开始：
<div id="wrapper">
<div style="float:left;" id="1">text here</div>
<div style="float:left;" id="2">text here</div>
<div style="clear:both"></div>
</div>
回答by Dan
CSS:
CSS：
#1 {
float: left;
width: 50%;
}
#2 {
float: left;
width: 50%;
}
回答by Richard JP Le Guen
You could use float:leftin conjunction with overflow-x:hidden;like so:
你可以像这样float:left结合使用overflow-x:hidden;：
#1 {
float:left
}
#2 {
overflow-x:hidden;
}
回答by Jay
add the following to your divs:
将以下内容添加到您的 div：
style="float:left"
回答by d.i.joe
#1, #2 {
display: inline-block;
}
Given that both #1 and #2 divs have a total width of not greater than the parent div.
鉴于 #1 和 #2 div 的总宽度不大于父 div。
If you use float, you will end up changing them to inline-block once you have to position a child div into absolute.
如果您使用浮动，一旦您必须将子 div 定位到绝对位置，您最终会将它们更改为 inline-block。
