CSS 并排对齐两个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2716955/
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
Aligning two divs side-by-side
提问by Ronnie
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
我有一个小问题。我正在尝试使用 CSS 并排对齐两个 div，但是，我希望将中心 div 水平放置在页面中央，我使用以下方法实现了这一点：
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
这工作得很好。我想将第二个 div 定位在中央页面换行的左侧，但我无法使用浮动来做到这一点，尽管我确定这是可能的。
I would like to push the red div up alongside the white div.
我想将红色 div 与白色 div 放在一起。
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
这是我当前关于这两个 div 的 CSS，侧边栏是红色 div，page-wrap 是白色 div：
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
回答by Nick Craver
If you wrapped your divs, like this:
如果你包装了你的 div，就像这样：
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
你可以使用这种样式：
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800pxas a unit, not the 600pxcentered with the 200pxon the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wraphas the width of your sidebar as it's left margin to move that far over.
不过，这是一种略有不同的外观，所以我不确定这是您想要的。这会将所有内容800px作为一个单元600px居中，而不是200px在左侧居中。基本方法是您的侧边栏向左浮动，但在主 div 内，并且#page-wrap侧边栏的宽度与您的侧边栏的宽度相同，因为它的左边距可以移动那么远。
Update based on comments:For this off-centered look, you can do this:
根据评论更新：对于这种偏离中心的外观，您可以这样做：
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
使用这种样式：
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
回答by Mr. Alien
I don't understand why Nick is using margin-left: 200px;instead off floating the other divto the leftor right, I've just tweaked his markup, you can use floatfor both elements instead of using margin-left.
我不明白为什么 Nick 使用margin-left: 200px;而不是将另一个浮动div到leftor right，我刚刚调整了他的标记，你可以使用float这两个元素而不是使用margin-left.
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:afterwhich am calling on the parent element, just to self clear the parent.
另外，我使用.clear:afterwhich 调用父元素，只是为了自我清除父元素。
回答by Mark Macneil Bikeio
This Can be Done by Style Property.
这可以通过样式属性来完成。
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
其结果将是：
Enjoy... Please Note: This works in Higher version of CSS (>3.0).
享受... 请注意：这适用于更高版本的 CSS (>3.0)。
回答by Dr Amit Sehgal
The HTML code is for three div align side by side and can be used for two also by some changes
HTML 代码用于三个 div 并排对齐，也可以通过一些更改用于两个
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
CSS 将是
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
此代码将调整响应式布局，因为它会调整
<div>
according to device width. Even one can silent anyone
根据设备宽度。甚至可以让任何人沉默
<div>
as
作为
<!--<div id="third">third</div> -->
and can use rest two for two
并且可以使用两个休息两个
<div>
side by side.
并排。
回答by matharden
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
也可以在没有包装器的情况下执行此操作 - div#main。您可以使用 margin: 0 auto; 将 #page-wrap 居中。方法然后使用左边的：- n; 方法来定位#sidebar 并添加#page-wrap 的宽度。
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
但是，如果窗口小于内容，侧边栏将消失在浏览器视口之外。
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
不过，尼克的第二个答案是最好的，因为它也更易于维护，因为如果您想调整 #page-wrap 的大小，则不必调整 #sidebar。
回答by Michael Herold
The easiest method would be to wrap them both in a container divand apply margin: 0 auto;to the container. This will center both the #page-wrapand the #sidebardivs on the page. However, if you want that off-center look, you could then shift the container200pxto the left, to account for the width of the #sidebardiv.
最简单的方法是将它们都包装在 a 中container div并应用于margin: 0 auto;容器。这将使页面上的#page-wrap和#sidebardiv居中。但是，如果您想要偏离中心的外观，则container200px可以将 向左移动，以考虑#sidebardiv的宽度。
