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:
下面是关于我目前的CSS这两个div，侧边栏是红色的div和页面纸是白色的div：
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
6 个解决方案
#1
71
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 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
虽然这是一个略有不同的外观，所以我不确定这是你所追求的。这将以800px为单位，而不是以左侧200px为中心的600px。基本的方法是你的侧边栏浮动，但在主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;
}
#2
13
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
我不明白Nick为什么使用margin-left：200px;相反，将其他div向左或向右浮动，我只是调整了他的标记，你可以使用浮动两个元素而不是使用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:after which am calling on the parent element, just to self clear the parent.
另外，我使用.clear：之后调用父元素，只是为了自我清除父元素。
#3
4
This Can be Done by Style Property.
这可以由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）。
#4
2
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.
尼克的第二个答案是最好的，因为它也更易于维护，因为你不需要调整#sidebar如果你想调整#page-wrap的大小。
#5
1
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.
最简单的方法是将它们包装在容器div中并应用margin：0 auto;到容器。这将使页面上的#page-wrap和#sidebar div居中。但是，如果您想要偏离中心的外观，则可以将容器200px向左移动，以考虑#sidebar div的宽度。
#6
1
The HTML code is for three div align side by side and can be used for two also by some changes
HTML代码用于并排排列三个div，也可以通过一些更改用于两个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.
并排。
#1
71
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 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
虽然这是一个略有不同的外观，所以我不确定这是你所追求的。这将以800px为单位，而不是以左侧200px为中心的600px。基本的方法是你的侧边栏浮动，但在主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;
}
#2
13
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
我不明白Nick为什么使用margin-left：200px;相反，将其他div向左或向右浮动，我只是调整了他的标记，你可以使用浮动两个元素而不是使用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:after which am calling on the parent element, just to self clear the parent.
另外，我使用.clear：之后调用父元素，只是为了自我清除父元素。
#3
4
This Can be Done by Style Property.
这可以由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）。
#4
2
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.
尼克的第二个答案是最好的，因为它也更易于维护，因为你不需要调整#sidebar如果你想调整#page-wrap的大小。
#5
1
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.
最简单的方法是将它们包装在容器div中并应用margin：0 auto;到容器。这将使页面上的#page-wrap和#sidebar div居中。但是，如果您想要偏离中心的外观，则可以将容器200px向左移动，以考虑#sidebar div的宽度。
#6
1
The HTML code is for three div align side by side and can be used for two also by some changes
HTML代码用于并排排列三个div，也可以通过一些更改用于两个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.
并排。