css 多列等高等宽布局

 

左右间距都是一样的。然后两个sibling也是均分。

使用display:table  和display:table-cell就可以啦

<div class="table"> 
            <p>Sibling 1</p> 
            <p>Sibling 2</p> 
</div>

 

.table{

display:table;

background-color: #007DDB;

width:100%;

height:300px;

border-spacing: 30px 0;  //中间两块的间距蓝色块是30px

}
.table p{

display:table-cell;

vertical-align:middle;  //上下垂直居中

border:1px solid #333;

text-align: center;

}