在一些特殊的情况下,我们可以使用table布局利用table的相关css属性来设置相关的css样式会比较方便,具体的使用方法看下面的例子:
HTML代码
<div class="wrapper">
<div class="middle">
<div class="box">两只黄鹂鸣翠柳,一行白鹭上青天。</div>
<div class="box">两只黄鹂鸣翠柳,一行白鹭上青天。</div>
<div class="box">两只黄鹂鸣翠柳,一行白鹭上青天。</div>
</div>
</div>
CSS代码
.wrapper {
border: 1px solid red;
display: table;
/*border-collapse: collapse;*/
border-spacing: 20px;
}
.middle {
border: 1px solid blue;
display: table-row;
}
.box {
border: 1px solid green;
display: table-cell;
}
最后,上一个效果图。毕竟有图有JB~
table布局.PNG