我在这里有一个工作代码:http://jsfiddle.net/WVm5d/ (可能需要将结果窗口放大以查看“对齐中心”效果)
问题
代码运行良好,但我不喜欢有display:table。这是唯一能让包裹类对齐中心的方法。我认为如果有一种方法可以使用display:block或显示:内联块。是否可以用另一种方法解决“对齐中心”问题
对我来说,向容器中添加固定with不是一个选项
如果JS Fiddle链接将来被破坏,我也会将代码粘贴到这里:
正文{
背景:#bbb ;;
}
.包裹{
背景:#aaa;
保证金:0自动;
显示:表格;
溢出:隐藏;
}
.侧边栏{
宽度:200px;
浮动:左;
背景:#eee;
}
.集装箱{
保证金:0自动;
背景:ddd;
显示:块;
浮动:左;
填充物:5px;
}
.盒子{
背景:#eee;
边框:1px实心#ccc;
填充:10px;
保证金:5px;
浮动:左;
}
.box:第n个子项(3n+1){
清除:左;
}
<;div class=“wrap”>;
<;div class=“侧栏”>;
边栏
</部门>;
<;div class=“container”>;
<;div class=“box”>;
高度1
</部门>;
<;div class=“box”>;
高度2<;br/>;
高度2
</部门>;
<;div class=“box”>;
高度3<;br/>;
高度3<;br/>;
高度3
</部门>;
<;div class=“box”>;
高度1
</部门>;
<;div class=“box”>;
高度2<;br/>;
高度2
</部门>;
<;div class=“box”>;
高度3<;br/>;
高度3<;br/>;
高度3
</部门>;
</部门>;
<;div class=“侧栏”>;
边栏
</部门>;
</部门>
试试这个。我在正文中添加了text align:center,并将display:inline block换行,然后删除了display:table
正文{
背景:#bbb ;;
文本对齐:居中;
}
.包裹{
背景:#aaa;
保证金:0自动;
显示:内联块;
溢出:隐藏;
}