問題
要實現如下的佈局。有幾種方案可以選擇呢？
方案一
css中前”世紀”的佈局方式-table，這種佈局方式不利於SEO，代碼量比較大。
<style type="text/css">
.content{width: 960px;margin: auto;}
.content-list{width: 300px;background-color: #4598BF;height: 300px;vertical-align: top;}
.content-pad{width: 30px;background-color: #7ACE2D;height: 300px;}
.middle-pad{width: 100%;height: 20px;}
</style>
<body>
<table class="content">
<tr>
<td class="content-list">1</td>
<td class="content-pad"></td>
<td class="content-list">2</td>
<td class="content-pad"></td>
<td class="content-list">3</td>
</tr>
<tr class="middle-pad"></tr>
<tr>
<td class="content-list">4</td>
<td class="content-pad"></td>
<td class="content-list">5</td>
<td class="content-pad"></td>
<td class="content-list">6</td>
</tr>
</table>
方案二
css中經典佈局div+float，使用float後。會使該標籤脫離文檔流（不按照正常的顯示方式顯示），後果就是父元素不能自適應高度。需要清楚子元素浮動.
ul{list-style:none;}
ul li{float: left;}
.content{width: 960px;margin: auto;}
.content li{width: 300px;margin-left: 20px;background-color: #7ACE2D;margin-bottom: 30px;height: 300px;}
.clearfix:after{content: ".";clear: both;height: 0;visibility: hidden;display: block;}
/*.clearfix{overflow: hidden;}*/
/*.clearfix{clear: both;}*/
</style>
<body>
<ul class="content clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="content clearfix">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
方案三
使用inline-block，行內塊佈局。會造成元素間距，具體的解決方案
去除inline-block元素間間距的N種方法
<style type="text/css">
/*ul li{margin: 0px;padding: 0px;}*/
/* * {margin: 0px;padding: 0px;}*/
ul li{display: inline-block;}
.content{width: 960px;margin: auto;}
.content li{width: 300px;margin-left: 20px;background-color: #7ACE2D;margin-bottom: 30px;height: 300px;}
</style>
<body>
<ul class="content">
<li>1
<li>2
<li>3</li>
</ul>
</body>
方案四
使用css3中的盒佈局，盒佈局能解決使用float或者position屬性時左右兩欄或多欄不能對其的問題。
<body>
<style type="text/css">
ul{list-style:none;}
.content{display: -moz-box;display: -webkit-box;width: 960px;margin: auto;}
.content li{width: 300px;margin-left: 20px; }
.content li:nth-child(1){background-color: #7ACE2D;}
.content li:nth-child(2){background-color: #4559BF;}
.content li:nth-child(3){background-color: #D62B5F;}
</style>
<ul class="content">
<li>gglinux,gglinux,gglinux
gglinux,gglinux,gglinux
gglinux,gglinux,gglinux
gglinux,gglinux,gglinux</li>
<li>2</li>
<li>3</li>
</ul>
</body>
就這樣吧，css3中還有兩種佈局方式。
多欄佈局：可以將一個元素中的內容分成多欄顯示，並且確保各欄中的內容底部對齊。
彈性盒佈局：可以保證容器的高度和寬度與瀏覽器的自適應性。