我这里有一个有效的代码:http://jsfiddle.net/WVm5d/(您可能需要将结果窗口放大才能看到居中对齐效果)
Question个
代码很好用，但我不喜欢display: table;.这是我唯一能让包裹类对齐中心的方法.我认为如果有办法使用display: block;或display: inline-block;会更好.有没有可能用另一种方法求解"对齐中心"？
对我来说，向容器中添加固定with不是一个选项.
I will also paste my code here if the JS Fiddle link gets broken in the future:
body {
background: #bbb;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: table;
overflow: hidden;
}
.sidebar {
width: 200px;
float: left;
background: #eee;
}
.container {
margin: 0 auto;
background: #ddd;
display: block;
float: left;
padding: 5px;
}
.box {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
float: left;
}
.box:nth-child(3n+1) {
clear: left;
}<div class="wrap">
<div class="sidebar">
Sidebar
</div>
<div class="container">
<div class="box">
Height1
</div>
<div class="box">
Height2<br />
Height2
</div>
<div class="box">
Height3<br />
Height3<br />
Height3
</div>
<div class="box">
Height1
</div>
<div class="box">
Height2<br />
Height2
</div>
<div class="box">
Height3<br />
Height3<br />
Height3
</div>
</div>
<div class="sidebar">
Sidebar
</div>
</div>