Html 如何在另一个 div 中水平放置两个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/323599/
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 to position two divs horizontally within another div
提问by Josh Smeaton
I haven't played with CSS for too long a time and am without references at the moment. My question should be fairly easy but googling isn't bringing up a sufficient answer. So, adding to the collective knowledge...
我已经很长时间没有使用 CSS 了，目前没有参考资料。我的问题应该相当简单，但谷歌搜索并没有提供足够的答案。因此，添加到集体知识...
|#header---------------------------------------------------------------|
| TITLE |
|#sub-title------------------------------------------------------------|
|bread > crumb | username logout |
|#sub-left | #sub-right|
|---------------------------------|------------------------------------|
That's what I'm wanting my layout to be. The heading anyways. I wanted sub-title to contain sub-left AND sub-right. What css rules do I use to ensure a div is bound by the attributes of another div. In this case, how do I ensure that sub-left and sub-right stay within sub-title?
这就是我想要的布局。反正标题。我希望副标题包含子左和子右。我使用什么 css 规则来确保一个 div 受另一个 div 的属性约束。在这种情况下，如何确保 sub-left 和 sub-right 保持在副标题内？
回答by Darko Z
Its quite a common misconception that you need a clear:bothdiv at the bottom, when you really don't. While foxy's answer is correct, you don't need that non-semantic, useless clearing div. All you need to do is stick an overflow:hiddenonto the container:
这是一个很常见的误解，认为clear:both底部需要一个div，而实际上不需要。虽然 Foxy 的回答是正确的，但您不需要那个非语义的、无用的清除 div。您需要做的就是将一个overflow:hidden粘贴到容器上：
#sub-title { overflow:hidden; }
回答by foxy
When you float sub-leftand sub-rightthey no longer take up any space within sub-title. You need to add another div with style = "clear: both"beneath them to expand the containing div or they appear below it.
当您漂浮时sub-left，sub-right它们不再占用sub-title. 您需要style = "clear: both"在它们下方添加另一个 div以展开包含的 div，否则它们会出现在其下方。
HTML:
HTML：
<div id="sub-title">
<div id="sub-left">
sub-left
</div>
<div id="sub-right">
sub-right
</div>
<div class="clear-both"></div>
</div>
CSS:
CSS：
#sub-left {
float: left;
}
#sub-right {
float: right;
}
.clear-both {
clear: both;
}
回答by Justin Lucente
I agree with Darko Z on applying "overflow: hidden" to #sub-title. However, it should be mentioned that the overflow:hidden method of clearing floats does not work with IE6 unless you have a specified width or height. Or, if you don't want to specify a width or height, you can use "zoom: 1":
我同意 Darko Z 将“溢出：隐藏”应用于#sub-title。但是，应该提到的是，除非您指定了宽度或高度，否则清除浮动的 overflow:hidden 方法不适用于 IE6。或者，如果您不想指定宽度或高度，则可以使用“zoom: 1”：
#sub-title { overflow:hidden; zoom: 1; }
回答by csexton
This should do what you are looking for:
这应该做你正在寻找的：
<html>
<head>
<style type="text/css">
#header {
text-align: center;
}
#wrapper {
margin:0 auto;
width:600px;
}
#submain {
margin:0 auto;
width:600px;
}
#sub-left {
float:left;
width:300px;
}
#sub-right {
float:right;
width:240px;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Head</h1></div>
<div id="sub-main">
<div id="sub-left">
Right
</div>
<div id="sub-right">
Left
</div>
</div>
</div>
</body>
</html>
And you can control the entire document with the wrapper class, or just the two columns with the sub-main class.
并且您可以使用包装类控制整个文档，或者使用子主类仅控制两列。
回答by James Piggot
This answer adds to the solutions above to address your last sentence that reads:
此答案添加到上述解决方案中，以解决您的最后一句话：
how do I ensure that sub-left and sub-right stay within sub-title
我如何确保副左和副右留在副标题内
The problem is that as the content of sub-left or sub-right expands they will extend below sub-title. This behaviour is designed into CSS but does cause problems for most of us. The easiest solution is to have a div that is styled with the CSS Clear declaration.
问题是，随着 sub-left 或 sub-right 的内容扩展，它们将扩展到副标题下方。这种行为是设计在 CSS 中的，但确实会给我们大多数人带来问题。最简单的解决方案是拥有一个带有 CSS Clear 声明样式的 div。
To do this include a CSS statement to define a closing div (can be Clear Left or RIght rather than both, depending on what Float declarations have been used:
要做到这一点，包括一个 CSS 语句来定义一个结束 div（可以是 Clear Left 或 RIght 而不是两者，这取决于使用了什么 Float 声明：
#sub_close {clear:both;}
And the HTML becomes:
并且 HTML 变为：
<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>
Sorry, just realized this was posted previously, shouldn't have made that cup of coffee while typing my reply!
抱歉，刚刚意识到这是以前发布的，不应该在输入我的回复时煮那杯咖啡！
@Darko Z: you are right, the best description for the overflow:auto (or overflow:hidden) solution that I have found was in a a post on SitePoint a while ago Simple Clearing of FLoatsand there is also a good description in a 456bereastreet article CSS Tips and Tricks Part-2. Have to admit to being too lazy to implement these solutions myself, as the closing div cludge works OK although it is of course very inelegant. So will make an effort from now on to clean up my act.
@Darko Z：您说得对，我发现的关于溢出的最佳描述：自动（或溢出：隐藏）解决方案是在不久前 SitePoint 上的一篇文章中的简单清除浮点数，并且在456bereastreet中也有很好的描述文章CSS Tips and Tricks Part-2。不得不承认自己太懒了，无法自己实现这些解决方案，因为关闭 div cludge 可以正常工作，尽管它当然非常不优雅。所以从现在开始会努力清理我的行为。
回答by inspite
Seriously try some of these, you can choose fixed width or more fluid layouts, the choice is yours! Really easy to implement too.
认真尝试其中一些，您可以选择固定宽度或更流畅的布局，选择权在您手中！也很容易实现。
IronMyers Layouts
IronMyers 布局
- CSS Layouts
- Layouts Customization Guide
- 750 Pixel CSS Layouts
- 950 Pixel CSS Layouts
- 100 Percent CSS Layouts
more more more
更多更多更多
回答by csexton
You can also achieve this using a CSS Grids framework, such as YUI Gridsor Blue Print CSS. They solve alot of the cross browser issues and make more sophisticated column layouts possible for use mere mortals.
您也可以使用 CSS Grids 框架来实现这一点，例如YUI Grids或Blue Print CSS。它们解决了很多跨浏览器的问题，并使更复杂的列布局成为可能，供普通人使用。
回答by Konga Raju
Best and simple approach with css3
使用 css3 的最佳和简单方法
#subtitle{
/*for webkit browsers*/
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack: center;
width:100%;
}
#subleft,#subright{
width:50%;
}
回答by Kevin
#sub-left, #sub-right
{
display: inline-block;
}
回答by Razan Paul
Via Bootstrap Grid, you can easily get the cross browser compatible solution.
通过Bootstrap Grid，您可以轻松获得跨浏览器兼容的解决方案。
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
Div1
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
Div2
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/DTcHh/4197/
jsfiddle：http: //jsfiddle.net/DTcHh/4197/
