Html 将两个 div 放在一个 div 容器中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5844562/
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
Place two divs inside a div container?
提问by obinoob
How can I put two divs side by side?
如何并排放置两个div？
The left div has to be aligned top, left The second top, right. Both has to be "inside" the container and respect auto-growth...
左 div 必须对齐 top, left 第二个 top, right。两者都必须在容器“内部”并尊重自动增长......
Thanks.
谢谢。
this is what I've done:
这就是我所做的：
.devCtrl,#leftcolumn,#rightcolumn {
background: rgba(255, 255, 255, .3);
border-color: rgba(255, 255, 255, .6);
border-style: solid;
border-width: 1px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#leftcolumn {
display:inline;
min-height: 400px;
float: left;
width: 440px;
}
#rightcolumn {
width: 440px;
min-height: 400px;
float: right;
}
回答by webdesserts
Update: Use Flexbox
更新：使用 Flexbox
These days I would do this with flexbox. It has a decent amount of browser support and if you use fallbacks (I would suggest using autoprefixer) you should be fine.
这些天我会用 flexbox 来做这件事。它有相当数量的浏览器支持，如果你使用回退（我建议使用autoprefixer）你应该没问题。
#containerDiv {
display: flex;
justify-content: space-between;
}
And that's it! This will respect auto-growth and, even better, will allow the right div to wrap to the next line when the container runs out of space (you can prevent this with flex-wrap: nowrap;). If you're wanting to work more divs into a column layout, I would also suggest looking into flex-direction: column;. Flexbox can do a lot of other stuff like reorder the divs and control how to align those boxes, so I would look into it more if it interests you.
就是这样！这将尊重自动增长，甚至更好的是，当容器空间不足时，将允许正确的 div 换行到下一行（您可以使用 防止这种情况flex-wrap: nowrap;）。如果您想在列布局中使用更多 div，我还建议您查看flex-direction: column;. Flexbox 可以做很多其他的事情，比如重新排列 div 并控制如何对齐这些框，所以如果你感兴趣的话，我会更多地研究它。
Use Absolute Positioning
使用绝对定位
#containerDiv {
position: relative;
}
#leftDiv {
position: absolute;
top: 5px;
left: 5px;
}
#rightDiv {
position: absolute
top: 5px;
right: 5px;
}
The only issue with this is that the divs will ignore any other content in the #container div and you would have to set a top-margin for the first set of content below the divs. This obviously will not adjust to any increase in size from your container divs
唯一的问题是 div 将忽略 #container div 中的任何其他内容，您必须为 div 下方的第一组内容设置上边距。这显然不会适应容器 div 大小的任何增加
or
或者
Use floats
使用浮动
I see that you already have a few floats in your current css, but I'm guessing your having issues with the float's overflowing your containing div or content.
我看到您当前的 css 中已经有一些浮点数，但我猜您遇到了浮点数溢出包含 div 或内容的问题。
#leftDiv {
float: left;
}
#rightDiv {
float: right;
}
#nextSetOfContent {
clear: both;
}
and both the container and all following content would pay attention to a growth in content.
并且容器和所有后续内容都会关注内容的增长。
If you have no other content below the two divs, you can ensure that the outermost div expands to them by adding an overflow: autoto the container div. This is generally referred to as a "clearfix". Just take note that this is kind of a hack, and can cause unexpected results in odd circumstances. I would do more reading up on it if you want to prevent anything like that.
如果两个div下面没有其他内容，可以通过向overflow: auto容器div添加一个来确保最外面的div扩展到它们。这通常称为“清除修复”。请注意，这是一种黑客行为，可能会在奇怪的情况下导致意外结果。如果你想防止这样的事情，我会做更多的阅读。
Otherwise you would have to put an empty element below the floats and then clear: bothon it.
否则，您必须在浮点下方放置一个空元素，然后再clear: both放在上面。
As you can see, your choices vary depending on what exactly you need to with the rest of the container div's content. Let me know if there is any extra content in the container div and I can edit my answer to apply.
如您所见，您的选择取决于您对容器 div 的其余内容的确切需求。让我知道容器 div 中是否有任何额外的内容，我可以编辑我的答案以进行应用。
回答by obinoob
/Div container/
/ div 容器/
#containerDiv {
overflow: hidden;
margin-top: 7px;
margin-left: 7px;
margin-right: 7px;
}
/Div's shared rules/
/ Div 的共享规则/
.container,#leftDiv,#rightDiv {
background: rgba(255, 255, 255, .3);
border-color: rgba(255, 255, 255, .6);
border-style: solid;
border-width: 1px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 414px;
}
/*All tables */
/*所有表*/
.container td {
padding-right: 10px;
text-align: justify;
}
/leftDiv specific info/
/ leftDiv 具体信息/
#leftDiv {
float: left;
padding: 10px;
}
/rightDiv specific info/
/ rightDiv 特定信息/
#rightDiv {
float: right;
padding: 10px;
}
回答by Visionary Software Solutions
Yuck. Don't do it like that. Try thisor this. Yahoo offers a nice service to help make good layouts:
哎呀。不要那样做。试试这个或这个。雅虎提供了一个很好的服务来帮助做出好的布局：
