CSS-并排对齐两个div
这个问题已经在这里有了答案：
并排对齐
元素 3个答案
我有一个小问题。 我正在尝试使用CSS并排对齐两个div，但是，我希望将中心div在页面中水平居中放置，我通过使用以下方法实现了这一点：
#page-wrap { margin 0 auto; }
很好 我想将第二个div放置在中心页面换行的左侧，但是尽管可以确定，但我无法使用浮点数来完成此操作。
我想将红色div推向白色div。
这是我当前关于这两个div的CSS，侧边栏是红色div，页面换行是白色div：
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
Ronnie asked -07-05T18:22:48Z
6个解决方案
74 votes
如果包裹了div，如下所示：
您可以使用以下样式：
#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;
}
不过，这看起来有些不同，所以我不确定这是您追求的。 这会将所有800px以一个单元为中心，而不是以200px在左侧为中心的600px。 基本方法是侧边栏向左浮动，但在主div内部，并且#page-wrap具有侧边栏的宽度，因为它的左边距将其移到更远处。
根据评论更新：对于这种偏心的外观，您可以这样做：
通过这种样式：
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
Nick Craver answered -07-05T18:23:27Z
15 votes
我不明白为什么尼克使用.clear:after而不是将另一个div浮动到left或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: "";
}
另外，我使用了.clear:after来调用父元素，只是为了自我清除父元素。
Mr. Alien answered -07-05T18:23:56Z
8 votes
可以通过样式属性完成。
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
Red DIVBlue DIV
其结果将是：
请享用... 请注意：这在CSS的更高版本(> 3.0)中有效。
Mark Macneil Bikeio answered -07-05T18:24:24Z
3 votes
HTML代码用于三个div并排对齐，也可以通过一些更改用于两个div
firstsecondthird
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%;
}
该代码将调整响应式布局，因为它将调整大小
根据设备的宽度。哪怕一个人都能沉默
如
可以用剩下的两个
并排。
Dr Amit Sehgal answered -07-05T18:25:10Z
2 votes
也可以在没有包装器的情况下执行此操作-div＃main。 您可以使用以下空白使＃page-wrap居中：0自动； 方法，然后使用左侧：-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;
}
但是，如果窗口小于内容，则侧边栏将消失在浏览器视口之外。
Nick的第二个答案是最好的，因为它也更易于维护，因为如果您要调整＃page-wrap的大小，则不必调整#sidebar。
matharden answered -07-05T18:25:40Z
1 votes
最简单的方法是将它们都包装在container div中，然后将margin: 0 auto;应用于容器。 这将在页面上将#page-wrap和#sidebar div居中。 但是，如果您想要偏心的外观，则可以将container 200px向左移动，以解决#sidebar div的宽度。
Michael Herold answered -07-05T18:26:00Z
