關於CSS如何?多行多欄版面配置的方法

這篇文章主要介紹了CSS實現多行多列的布局的執行個體代碼,需要的朋友可以參考下

1.兩列多行：

HTML:

<p class="box1">    box1:實現兩列多行布局    <ul>        <li>111</li>        <li>222</li>        <li>333</li>    </ul></p>

CSS:

.box1 {  width: 500px;  background: #EEEEEE;}.box1 ul {  clear: both;  overflow: hidden;}.box1 ul li {  width: 48%;  height: 100px;  margin-bottom: 10px;  background: skyblue;  float: left;}.box1 ul li:nth-child(even) {  margin-left: 4%;}

這用到了nth-child（），相容ie9及以上的瀏覽器，中間的空隙就是兩個並排p寬度之和，100%減去後剩下的寬度；

既然提到了nth-child（）,那麼就要說一下nth-of-type（），也是只相容ie9及以上的瀏覽器。它與nth-child的區別是：

<p class="box">    <h1></h1>    <h1></h1>    <p></p>    <p></p>    <p></p></p>

如果要讓第二個p標籤背景為紅色，那麼，p:nth-child(4)這個能實現效果；而p:nth-of-type(2)，就能實現。所以nth-of-type不管p標籤前面有多少內容，都只認p的第二個元素。而nth-child卻是找它父級的第幾個元素。在這種情況下nth-of-type的優點就體現出來了。

2.多行多列

HTML：

<p class="box2">    box2:多行多列    <ul>        <li>            <p class="com">                111            </p>        </li>        <li>            <p class="com">                222            </p>        </li>        <li>            <p class="com">                333            </p>        </li>        <li>            <p class="com">                444            </p>        </li>    </ul></p>

CSS:

.box2 {  background: #EEEEEE;  margin-top: 20px;  width: 500px;}.box2 ul {  overflow: hidden;  margin-left: -10px;  background: #EEEEEE;}.box2 ul li {  width: 33.3333%;  height: 50px;  float: left;  padding-left: 10px;  box-sizing: border-box;  margin-bottom: 10px;}.box2 ul li .com {  height: inherit;  background: skyblue;}

這裡實現的原理是：子級使用padding-left（元素間的間隙）和box-sizing:border-box，父級使用margin-left負值，這個值和子級padding-left是一樣的。li裡面加p只是為了讓效果明顯，不然給li加上背景，由於box-sizing：border-box的存在，li看起來就是沒效果全部連在一起的。

如果要實現2列，4列，5列等多列，只需修改li的寬度（平均分配）就行了。

這種做法相容ie8及以上的瀏覽器，在ie7下，每個li的寬度大概比正常的少2%左右，比如3列，正常顯示的話，每個li寬度是33.333%，但是ie7下需設定31.333%，才能基本正常顯示。。。這具體的原因沒深究，後面有時間再來補這個坑 ×××

3.聖杯布局：

HTML:

<p class="box3">    <p class="header">聖杯布局(使用浮動)頂部</p>    <p class="container">        <p class="center">            中間自適應寬度,注意這個center是在left的p前面        </p>        <p class="left">            左部固定寬度        </p>        <p class="right">            右部固定寬度        </p>    </p>    <p class="footer">聖杯布局底部</p></p>

CSS：

.box3 {  background: #EEEEEE;  color: white;  margin-top: 20px;}.box3 .header {  width: 100%;  background: #008000;  height: 50px;}.box3 .container {  clear: both;  overflow: hidden;  padding: 0 130px 0 100px;}.box3 .container .left {  width: 100px;  float: left;  background: #008B8B;  height: 100px;  margin-left: -100%;  position: relative;  left: -100px;}.box3 .container .center {  background: #00BFFF;  height: 100px;  float: left;  width: 100%;}.box3 .container .right {  width: 130px;  float: left;  background: #FA8072;  height: 100px;  margin-left: -130px;  position: relative;  right: -130px;}.box3 .footer {  width: 100%;  background: #222222;  height: 30px;}

聖杯布局最主要的是中間那並列的3個p，上下兩個p，我只是拿來充數的。。。

實現過程大致如下：1.這三個p的HTML擺放的先後順序是有講究的，center這個顯示在中間的p，在html裡是排在最前面的，然後是left，最後是right。

2.在container沒有設定padding，left這個p和right這個p都沒設定margin與相對定位relative之前，三個p都float：left。這時候頁面上顯示的是center獨佔一行，然後是left這個p，然後是right這個p

3.然後left這個p設定margin-left：-100%。這樣left就能從第二排蹦到第一排最左邊並覆蓋center這個p。

4.right這個p設定margin-left: -130px;這個值是它自己寬度的大小。然後right這個p也蹦到第一排最右邊並覆蓋center這個p。

5.這個時候container設定padding，這個padding的大小是left與right這兩個p分別的寬度，然後left與right這兩個p分別再設定相對定位，移動自己寬度的距離，就正常顯示了。

這種布局方式ie7都相容，ie6沒有測試過。。。

4.仿聖杯布局

HTML：

<p class="box4">    <p class="header">聖杯布局2(使用定位)頂部</p>    <p class="container">        <p class="left">            左部固定寬度        </p>        <p class="center">            中間自適應寬度，無需考慮順序        </p>        <p class="right">            右部固定寬度        </p>    </p>    <p class="footer">聖杯布局2底部</p></p>

CSS:

.box4 {  background: #EEEEEE;  color: white;  margin-top: 20px;}.box4 .header {  width: 100%;  background: #008000;  height: 50px;}.box4 .container {  clear: both;  overflow: hidden;  padding: 0 130px 0 100px;  position: relative;}.box4 .container .left {  width: 100px;  background: #008B8B;  height: 100px;  position: absolute;  top: 0px;  left: 0px;}.box4 .container .center {  background: #00BFFF;  height: 100px;  width: 100%;}.box4 .container .right {  width: 130px;  background: #FA8072;  height: 100px;  position: absolute;  top: 0px;  right: 0px;}.box4 .footer {  width: 100%;  background: #222222;  height: 30px;}

這種方式實現的思路是：左右兩邊絕對位置，然後中間的p設定padding，也能達到同樣的效果。也不用在意中間的三個p的排版順序，我一直都在用這種方式。

也相容ie7，ie6沒測試過

5.雙飛翼布局

HTML：

<p class="box5">    <p class="header">雙飛翼布局頂部</p>    <p class="container">        <p class="center">            <p class="center-in">                中間自適應寬度,注意這個center是在left的p前面            </p>        </p>        <p class="left">            左部固定寬度        </p>        <p class="right">            右部固定寬度        </p>    </p>    <p class="footer">雙飛翼布局底部</p></p>

CSS:

.box5 {  background: #EEEEEE;  color: white;  margin-top: 20px;}.box5 .header {  width: 100%;  background: #008000;  height: 50px;}.box5 .container {  clear: both;  overflow: hidden;}.box5 .container .left {  width: 100px;  float: left;  background: #008B8B;  height: 100px;  margin-left: -100%;}.box5 .container .center {  background: #00BFFF;  height: 100px;  float: left;  width: 100%;}.box5 .container .center .center-in {  margin: 0 130px 0 100px;}.box5 .container .right {  width: 130px;  float: left;  background: #FA8072;  height: 100px;  margin-left: -130px;}.box5 .footer {  width: 100%;  background: #222222;  height: 30px;}

雙飛翼布局和聖杯布局看起來都差不多，但是最大的不同就是：雙飛翼布局中center中間的這個p裡面還有一個p，主要通過這個p的margin值來達到布局的目的。然後left和right這兩個p都不用再設定相對定位relative。其它的都基本一樣

相容ie7，ie6未測試過。

還有許多多行多列的布局方式，比如css3的flex，inline-block等等。。只要有思路，再難的布局都能實現。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！