CSS的四行兩列tr是一種常見的網頁布局,可以將內容分成兩列并自適應寬度。其中tr指的是table row,即表格行。下面是其基本代碼:
<table> <tr> <td>內容1</td> <td>內容2</td> </tr> <tr> <td>內容3</td> <td>內容4</td> </tr> <!-- 以此類推 --> </table>
通過設置CSS樣式,可以將這個表格變成四行兩列的布局。其中使用了float屬性和margin屬性,使其實現自適應寬度。下面是樣式代碼:
table { width: 100%; } td { float: left; width: 50%; margin: 0; padding: 10px; box-sizing: border-box; } tr:first-child td { border-top: none; }
其中,box-sizing: border-box;是為了使padding不會撐大元素,而是會縮小內部的內容。這種布局可以在很多網頁中見到,讓內容更加有條理、簡潔明了。
上一篇css3怎么縮小
下一篇css3怎么插入字體樣式