CSS3提供了許多新的布局方式,其中表格布局是常用的一種。
使用CSS3表格布局,需要將HTML中的表格元素設(shè)置為display:table,然后將每個單元格設(shè)置為display:table-cell,即可實(shí)現(xiàn)表格布局。
<div id="table"> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> </div> <div class="row"> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> </div> #table { display: table; } .row { display: table-row; } .cell { display: table-cell; }
使用CSS3表格布局可以實(shí)現(xiàn)響應(yīng)式布局,因為單元格可以自適應(yīng)寬度。此外,它還可以降低HTML代碼的復(fù)雜度,使得代碼更加簡潔易讀。