在網(wǎng)頁(yè)設(shè)計(jì)中，要經(jīng)常用到等高設(shè)計(jì)。而在多列等高的設(shè)計(jì)中，我們最好使用CSS 實(shí)現(xiàn)。CSS多列等高圖解是一種利用CSS技術(shù)制作等高圖的方法，可以使同一行中的不同列高度一致，以使頁(yè)面看起來更加美觀。

在實(shí)現(xiàn)多列等高圖的時(shí)候，最好使用CSS表格布局或者浮動(dòng)布局。CSS表格布局可以使用每一行的高度相同，同時(shí)浮動(dòng)布局要使用余數(shù)均分的方法，以確保每列高度一致，并且不會(huì)對(duì)頁(yè)面排版產(chǎn)生影響。

.layout{
width: 100%;
display: table;
border-collapse: collapse;
border-spacing: 0;
}
.layout .col{
width: 33.33%;
border: 1px solid #999;
display: table-cell;
vertical-align: top;
}

上面的代碼是一個(gè)表格布局的代碼，首先設(shè)置display屬性為table，使用table布局，然后設(shè)置每一列的寬度為33.33%。.col是每一列的名稱，要設(shè)置為display屬性為table-cell，以使每一行以表格的形式排列。

另外，還可以使用浮動(dòng)布局，在CSS中，每一列的高度是通過padding-bottom來設(shè)置的。其中的tricks在于設(shè)置height：0、padding-bottom：ratio%（ratio是每一欄高度的比例）和overflow：hidden，這三個(gè)屬性可以使每一行的底部留出百分比的空間，并事先計(jì)算每一格之間留出的間隔，使頁(yè)面的等高布局盡量的美觀。代碼如下：

.clearfix:after{
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.layout{
width: 100%;
overflow: hidden;
}
.layout .col{
width: 33.33%;
float: left;
height: 0;
padding-bottom: 60%;
overflow: hidden;
}

總之，實(shí)現(xiàn)多列等高圖的效果不僅能夠提升頁(yè)面的審美價(jià)值，還能夠增加用戶的體驗(yàn)感受。我們可以看到，使用CSS表格布局或者浮動(dòng)布局將網(wǎng)頁(yè)設(shè)計(jì)帶到了一個(gè)全新的水平，可以珍惜這樣的技術(shù)，進(jìn)一步提升網(wǎng)站的設(shè)計(jì)效果。