實現(xiàn)三欄布局的幾種方法

言

三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。

我們不妨假定這樣一個布局：高度已知，其中左欄、右欄寬度各為300px,中間自適應(yīng)，可以通過幾種方法來實現(xiàn)？以及各自的優(yōu)缺點是什么？

本文源代碼請猛戳三欄布局源碼，歡迎star和fork

一、浮動布局

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Layout</title>
 <style media="screen">
 html * {
 padding: 0;
 margin: 0;
 }
 .layout article div {
 min-height: 150px;
 }
 </style>
</head>
<body>
 <!--浮動布局 -->
 <section class="layout float">
 <style media="screen">
 .layout.float .left {
 float: left;
 width: 300px;
 background: red;
 }
 .layout.float .center {
 background: yellow;
 }
 .layout.float .right {
 float: right;
 width: 300px;
 background: blue;
 }
 </style>
 <h1>三欄布局</h1>
 <article class="left-right-center">
 <div class="left"></div>
 <div class="right"></div> // 右欄部分要寫在中間內(nèi)容之前
 <div class="center">
 <h2>浮動解決方案</h2>
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案；
 </div>
 </article>
 </section>
</body>
</html>

這種布局方式，dom結(jié)構(gòu)必須是先寫浮動部分，然后再中間塊，否則右浮動塊會掉到下一行。

浮動布局的優(yōu)點就是比較簡單，兼容性也比較好。但浮動布局是有局限性的，浮動元素脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如父容器高度塌陷等。

二、絕對布局

 <!--絕對布局 -->
 <section class="layout absolute">
 <style>
 .layout.absolute .left-center-right>div{
 position: absolute;//三塊都是絕對定位
 }
 .layout.absolute .left {
 left:0;
 width: 300px;
 background: red;
 }
 .layout.absolute .center {
 right: 300px;
 left: 300px;//離左右各三百
 background: yellow;
 }
 .layout.absolute .right {
 right: 0;
 width: 300px;
 background: blue;
 }
 </style>
 <h1>三欄布局</h1>
 <article class="left-center-right">
 <div class="left"></div>
 <div class="center">
 <h2>絕對定位解決方案</h2>
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案；
 </div>
 <div class="right"></div>
 </article>
 </section>

絕對定位布局優(yōu)點就是快捷，設(shè)置很方便，而且也不容易出問題。缺點就是，容器脫離了文檔流，后代元素也脫離了文檔流，高度未知的時候，會有問題，這就導(dǎo)致了這種方法的有效性和可使用性是比較差的。

三、flexbox布局

 <!--flexbox布局-->
 <section class="layout flexbox">
 <style>
 .layout.flexbox .left-center-right{
 display: flex;
 }
 .layout.flexbox .left {
 width: 300px;
 background: red;
 }
 .layout.flexbox .center {
 background: yellow;
 flex: 1;
 }
 .layout.flexbox .right {
 width: 300px;
 background: blue;
 }
 </style>
 <h1>三欄布局</h1>
 <article class="left-center-right">
 <div class="left"></div>
 <div class="center">
 <h2>flexbox解決方案</h2>
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案；
 </div>
 <div class="right"></div>
 </article>
 </section>

flexbox布局是css3里新出的一個，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較完美的一個。目前移動端的布局也都是用flexbox。 flexbox的缺點就是IE10開始支持，但是IE10的是-ms形式的。

四、表格布局

<!--表格布局-->
 <section class="layout table">
 <style>
 .layout.table .left-center-right {
 display: table;
 height: 150px;
 width: 100%;
 }
 .layout.table .left-center-right>div {
 display: table-cell;
 }
 .layout.table .left {
 width: 300px;
 background: red;
 }
 .layout.table .center {
 background: yellow;
 }
 .layout.table .right {
 width: 300px;
 background: blue;
 }
 </style>
 <h1>三欄布局</h1>
 <article class="left-center-right">
 <div class="left"></div>
 <div class="center">
 <h2>表格布局解決方案</h2>
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案；
 </div>
 <div class="right"></div>
 </article>
 </section>

表格布局的兼容性很好(見下圖)，在flex布局不兼容的時候，可以嘗試表格布局。當(dāng)內(nèi)容溢出時會自動撐開父元素。

表格布局也是有缺陷:①無法設(shè)置欄邊距；②對seo不友好；③當(dāng)其中一個單元格高度超出的時候，兩側(cè)的單元格也是會跟著一起變高的，然而有時候這并不是我們想要的效果。

五、網(wǎng)格布局

 <!--網(wǎng)格布局-->
 <section class="layout grid">
 <style>
 .layout.grid .left-center-right {
 display: grid;
 width: 100%;
 grid-template-columns: 300px auto 300px;
 grid-template-rows: 150px;//行高
 }
 .layout.grid .left {
 background: red;
 }
 .layout.grid .center {
 background: yellow;
 }
 .layout.grid .right {
 background: blue;
 }
 </style>
 <h1>三欄布局</h1>
 <article class="left-center-right">
 <div class="left"></div>
 <div class="center">
 <h2>網(wǎng)格布局解決方案</h2>
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案；
 </div>
 <div class="right"></div>
 </article>
 </section>

CSS Grid是創(chuàng)建網(wǎng)格布局最強大和最簡單的工具。就像表格一樣，網(wǎng)格布局可以讓W(xué)eb設(shè)計師根據(jù)元素按列或行對齊排列，但他和表格不同，網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)，從而使各種布局不可能與表格一樣。例如，一個網(wǎng)格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。

但網(wǎng)格布局的兼容性不好。IE10+上支持，而且也僅支持部分屬性。

六、總結(jié)

通過上面詳細(xì)介紹五種布局的優(yōu)缺點，在實際開發(fā)中最優(yōu)選擇哪種布局？相信讀者心中會有自己的答案。

我覺得flex和grid布局就可以搞定實際開發(fā)中的布局，假設(shè)瀏覽器都支持這兩個模塊，你將選擇grid還是flexbox來給頁面布局？flexbox是一維布局，他只能在一條直線上放置你的內(nèi)容區(qū)塊；而grid是一個二維布局。前面也簡單說到，你可以根據(jù)你的設(shè)計需求，將內(nèi)容區(qū)塊放置到任何你想要放的地方。那么不用多說，你應(yīng)該知道哪一種更適合你的布局。此外，如果要兼容低版本的IE(比如IE8+)，可以考慮table布局。

最后問大家一個問題，如果中間部分被內(nèi)容高度撐開，需要左右欄也撐開，這五種布局哪些布局還可以用？

答案：flex布局和table布局

言

上篇文章分享了一款史上最沒用的中文版的CSS漸變色庫，今天再來分享一篇它的兄弟庫chinese-layout。

chinese-layout是一款利用CSS自定義屬性來制作的中文布局CSS庫，由于grid布局十分強大，強大到甚至只需要兩行CSS代碼就可以完成一個基本的布局。不過grid屬性較多較為復(fù)雜，并且不支持IE瀏覽器等特點導(dǎo)致了許多人并不很了解它。

不過近些年來隨著IE瀏覽器的逐步退出市場，兼容性已經(jīng)不再是特別需要糾結(jié)的一件事情了：

可以看到各大瀏覽器的支持情況已經(jīng)較為樂觀了，為了讓大家快速體驗grid布局的強大之處，chinese-layout就此誕生！

該庫的尺寸十分輕量級，只有不到1KB的大小(653字節(jié))，并且使用起來也是十分的方便。

使用方式

假設(shè)現(xiàn)在有一個ul元素，我們想要它變?yōu)橐粋€九宮格的布局，首先需要在ul元素上寫：

ul {
    /* 這個是固定寫法，必須先指定display為grid */
    display: grid;
  
  /* grid屬性需要指定哪種布局 */
  grid: var(--九宮格);
  
  /* 加入一點間距，讓九個元素相互之間有一定的距離 */
  gap: 10px;
}

然后在父元素里面添加九個元素：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

這就完事啦：

當(dāng)然這里其實是省略了一些父元素上的寬高以及子元素的顏色等細(xì)節(jié)。

這些細(xì)節(jié)就交給你們來決定，在此案例中chinese-layout只負(fù)責(zé)將父元素分割成九等分。

安裝

要記得先引入這個庫才能夠去正常的使用。如果你的項目是一個工程化的項目，那么：

記得要在主文件中引入：

同時也支持sass、less等，如:

如果你只是想在<link>標(biāo)簽里引入的話，那么：

全部布局

聲明 display: grid;

首先一定要記得聲明 display: grid;

因為chinese-layout底層依賴的就是grid布局。

居中

grid: var(--居中)

DOM結(jié)構(gòu):

<parent>
  <child/>
</parent>

這種布局需要先在父元素上寫這么兩行代碼:

parent {
  display: grid;
  grid: var(--居中);
}

然后再在子元素上寫上:

child {
  grid-area: 中;
}

但是看起來除了灰蒙蒙一片的背景好像啥也沒有是吧，那是因為我們沒給子元素加上寬高，而且子元素里也沒有任何的內(nèi)容，導(dǎo)致子元素寬高為0不可見，那么現(xiàn)在我們來給子元素一個寬高再來看看：

child {
  width: 20px;
  height: 20px;
  grid-area: 中;
}

子元素便會在父元素里水平垂直居中:

雙列

grid: var(--雙列)

DOM結(jié)構(gòu):

parent {
  display: grid;
  grid: var(--雙列);
}

來看看語法:

parent {
  display: grid;
  grid: var(--雙列);
}

可以看到現(xiàn)在兩列緊緊的貼合在一起了，不過有時候這兩列我們并不想它們緊貼在一起，這時我們可以使用 gap 屬性來控制列與列之間的間距：

parent {
  display: grid;
  grid: var(--雙列);
  gap: 10px;
}

運行結(jié)果:

可以看到列與列直接距離變成我們設(shè)置的10px了，但 gap 屬性只會改變列與列之間的距離，并不會改變與父元素之間的距離，所以之前緊貼著父元素的現(xiàn)在還是緊貼著父元素，如果想與父元素有間距的話可以給父元素加padding:

雙列布局是不需要指定子元素的 grid-area 屬性的，不過你要是非要想指定一下的話也不是不可以:

child1 {
    grid-area: 左;
}

child2 {
  grid-area: 右;
}

運行結(jié)果:

(可以通過指定grid-area來顛倒DOM位置，沒事可以去試試)

三列

grid: var(--三列)

咦？這不是雙列嗎？說好的三列呢？

其實是這樣，三列中的最中間一列被做成了自適應(yīng)了，如果不給寬度并且也沒有任何帶寬度的子元素的話寬度就會為0，所以就看不到最中間那列啦！

那咱們給中間的DOM元素一個寬度吧:

<parent>
  <child1/>
  <child2/>
  <child3/>
</parent>

parent {
    display: grid;
  grid: var(--三列);
}
child2 {
    width: 800px;
}

運行結(jié)果:

也可以不給寬度，直接用內(nèi)容去撐開:

<parent>
  <child1/>
  <child2>child2</child2>
  <child3/>
</parent>

運行結(jié)果:

也同樣可以用gap屬性來控制間距:

parent {
    display: grid;
  grid: var(--三列);
  gap: 10px;
}
child2 {
    width: 800px;
}

運行結(jié)果:

三列布局是不需要指定子元素的 grid-area 屬性的，不過你要是非要想指定一下的話也不是不可以:

child1 {
    grid-area: 左;
}

child2 {
  grid-area: 中;
}

child2 {
  grid-area: 右;
}

運行結(jié)果：

(可以通過指定子元素的 grid-area 屬性來顛倒DOM位置，沒事可以去試試)

呂形

grid: var(--呂形)

可是這看起來也不像呂形啊，呂不是應(yīng)該上面一個口下面一個口嗎？

其實還是那個原理：上面的盒子如果不給高度的話默認(rèn)為0。

那咱們給個高度再看看:

<parent>
  <child1/>
  <child2/>
</parent>

parent {
    display: grid;
  grid: var(--呂形);
}
child1 {
    height: 100px;
}
child2 {
    overflow-y: auto;
}

運行結(jié)果：

還可以通過 gap 屬性來控制間距:

parent {
    display: grid;
  grid: var(--呂形);
  gap: 10px;
}
child1 {
    height: 100px;
}

運行結(jié)果：

也可以通過指定子元素的 grid-area 屬性來顛倒DOM位置:

parent {
    display: grid;
  grid: var(--呂形);
  gap: 10px;
}
child1 {
  grid-area: 下;
  overflow-y: auto;
}
child2 {
  height: 100px;
  grid-area: 上;
}

運行結(jié)果:

上下欄

grid: var(--上下欄)

看過前面幾種布局的朋友應(yīng)該猜到了，是因為上盒子和下盒子沒給高度導(dǎo)致現(xiàn)在只能看見中間那欄，咱們給個高度再來看看:

<parent>
  <child1/>
  <child2/>
  <child3/>
</parent>

parent {
    display: grid;
  grid: var(--上下欄);
}
child1 {
    height: 80px;
}
child2 {
  overflow-y: auto;
}
child3 {
  height: 100px;
}

運行結(jié)果：

還可以通過 gap 屬性來控制間距:

parent {
    display: grid;
  grid: var(--上下欄);
  gap: 10px;
}
child1 {
    height: 80px;
}
child2 {
  overflow-y: auto;
}
child3 {
  height: 100px;
}

運行結(jié)果：

也可以通過指定子元素的 grid-area 屬性來顛倒DOM位置:

parent {
    display: grid;
  grid: var(--上下欄);
  gap: 10px;
}
child1 {
  grid-area: 中;
  overflow-y: auto;
}
child2 {
  height: 80px;
  grid-area: 上;
}
child3 {
  height: 100px;
  grid-area: 下;
}

運行結(jié)果:

四宮格

grid: var(--四宮格)

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
<parent/>

parent {
  display: grid;
  grid: var(--四宮格);
}

如果不想各個宮格緊貼在一起，可以用 gap 屬性來控制間距：

parent {
  display: grid;
  grid: var(--四宮格);
  gap: 10px;
}

運行結(jié)果：

gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個屬性了：

row-gap：行與行之間的間距
column-gap：列與列之間的間距

也可以通過 grid-area 屬性來重新分配DOM元素的位置：

child1 { grid-area: 左上; }
child2 { grid-area: 右上; }
child3 { grid-area: 左下; }
child4 { grid-area: 右下; }

運行結(jié)果：

六宮格

grid: var(--六宮格)

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
  <child6/>
<parent/>

parent {
  display: grid;
  grid: var(--六宮格);
}

如果不想各個宮格緊貼在一起，可以用 gap 屬性來控制間距：

parent {
  display: grid;
  grid: var(--六宮格);
  gap: 10px;
}

運行結(jié)果：

gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個屬性了：

row-gap：行與行之間的間距
column-gap：列與列之間的間距

也可以通過 grid-area 屬性來重新分配DOM元素的位置：

child1 { grid-area: 左上; }
child2 { grid-area: 右上; }
child3 { grid-area: 左下; }
child4 { grid-area: 右下; }

運行結(jié)果：

九宮格

grid: var(--九宮格)

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
  <child6/>
  <child7/>
  <child8/>
  <child9/>
<parent/>

parent {
  display: grid;
  grid: var(--九宮格);
}

如果不想各個宮格緊貼在一起，可以用 gap 屬性來控制間距：

parent {
  display: grid;
  grid: var(--九宮格);
  gap: 10px;
}

運行結(jié)果：

gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個屬性了：

row-gap：行與行之間的間距
column-gap：列與列之間的間距

也可以通過 grid-area 屬性來重新分配DOM元素的位置：

child1 { grid-area: 左上; }
child2 { grid-area: 中上; }
child3 { grid-area: 右上; }
child4 { grid-area: 左中; }
child5 { grid-area: 中中; }
child6 { grid-area: 右中; }
child7 { grid-area: 左下; }
child8 { grid-area: 中下; }
child9 { grid-area: 右下; }

運行結(jié)果：

鋪滿

grid: var(--鋪滿)

看起來貌似啥也沒有，那是因為顧名思義，鋪滿就是子元素和父元素的大小一樣大嘛，來看看DOM結(jié)構(gòu)：

<parent>
  <child/>
</parent>

parent {
  display: grid;
  gird: var(--鋪滿);
}

圣杯

grid: var(--圣杯)

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
</parent>

圣杯布局的子元素必須指定位置：

parent {
  display: grid;
  grid: var(--圣杯);
}
child1 { grid-area: 上; }
child2 { grid-area: 左; }
child3 { grid-area: 中; }
child4 { grid-area: 右; }
child5 { grid-area: 下; }

但是看起來并沒有看到圣杯布局的影子，灰蒙蒙的一片，還是那個原因，把上下左右的寬高控制權(quán)都留給用戶，如果子元素里沒有任何內(nèi)容并且沒有指定寬高的話就不會顯示在屏幕上，我們來給個合適的寬高再看看：

parent {
  display: grid;
  grid: var(--圣杯);
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  width: 100px;
  grid-area: 右;
}
child5 {
  height: 80px;
  grid-area: 下;
}

運行結(jié)果：

再給個間距看看效果：

parent {
  display: grid;
  grid: var(--圣杯);
  gap: 10px;
}

運行結(jié)果：

不給寬高只靠子元素的內(nèi)容撐起來也可以，而且可以缺少某一個DOM元素，比如我們不想要"右"了：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
</parent>

parent {
  display: grid;
  grid: var(--圣杯);
  gap: 10px;
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  height: 80px;
  grid-area: 下;
}

運行結(jié)果：

雖然看起來"中"的右側(cè)受 gap 屬性的影響導(dǎo)致有一定的間距，但我們可以不加 gap，靠 margin 來控制間距：

parent > child {
  margin: 10px;
}

運行結(jié)果：

即使不給"中"設(shè)置寬高，"中"也會根據(jù)父元素的寬高來自動調(diào)整自己的寬高大小。

也可以靠 row-gap 和 column-gap 屬性來單獨控制橫、縱間距：

雙飛翼

grid: var(--雙飛翼)

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
</parent>

雙飛翼布局的子元素必須指定位置：

parent {
  display: grid;
  grid: var(--雙飛翼);
}
child1 { grid-area: 上; }
child2 { grid-area: 左; }
child3 { grid-area: 中; }
child4 { grid-area: 右; }
child5 { grid-area: 下; }

但是看起來并沒有看到雙飛翼布局的影子，灰蒙蒙的一片，還是那個原因，把上下左右的寬高控制權(quán)都留給用戶，如果子元素里沒有任何內(nèi)容并且沒有指定寬高的話就不會顯示在屏幕上，我們來給個合適的寬高再看看：

parent {
  display: grid;
  grid: var(--雙飛翼);
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  width: 100px;
  grid-area: 右;
}
child5 {
  height: 80px;
  grid-area: 下;
}

運行結(jié)果：

再給個間距看看效果：

parent {
  display: grid;
  grid: var(--雙飛翼);
  gap: 10px;
}

運行結(jié)果：

不給寬高只靠子元素的內(nèi)容撐起來也可以，而且可以缺少某一個DOM元素，比如我們不想要"右"了：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
</parent>

parent {
  display: grid;
  grid: var(--雙飛翼);
  gap: 10px;
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  height: 80px;
  grid-area: 下;
}

運行結(jié)果：

雖然看起來"中"的右側(cè)受 gap 屬性的影響導(dǎo)致有一定的間距，但我們可以不加 gap ，靠 margin 來控制間距：

parent > child {
  margin: 10px;
}

運行結(jié)果：

即使不給"中"設(shè)置寬高，"中"也會根據(jù)父元素的寬高來自動調(diào)整自己的寬高大小。

也可以靠 row-gap 和 column-gap 屬性來單獨控制橫、縱間距：

響應(yīng)式

grid: var(--響應(yīng)式)

響應(yīng)式布局會根據(jù)父元素的大小以及子元素的數(shù)量來自行決定如何排版

DOM結(jié)構(gòu):

<parent>
  <child1/>
    <child2/>
   ......
    <child-N/>
</parent>

parent {
  display: grid;
  grid: var(--響應(yīng)式);
}

不過每列的最小寬度默認(rèn)是100px，如果想改變這一大小的話需要在 :root 選擇器上定義一個 --寬 變量，比如想要寬變成30px：

:root {
  --寬: 30px;
}

如果每個子元素之間的距離太近了的話別忘記用 gap 屬性來控制間距哦：

parent {
  display: grid;
  grid: var(--響應(yīng)式);
  gap: 10px;
}

總結(jié)

整體來說這款插件還是不錯的，使用簡單方便，中文命名雖然符合中國人的習(xí)慣，但命名太多比較依賴文檔。

還在為布局頭疼的朋友可以快速入手哦！

么是column-count文本多列布局？

我們可以看到當(dāng)使用多列布局column-count屬性后，可以將文本分成2兩列，column-count屬性的參數(shù)為整數(shù)型，即寫入數(shù)字幾，就代表分成幾列。

列與列之間的間隔column-gap屬性

我們設(shè)置column-gap屬性為80px,從案例中我們也可以看到我們的文本列與列之間的間隔為80px。

列間隔的樣式column-rule

column-rule屬性有三個參數(shù)，分別是設(shè)置寬度，間隔樣式，顏色。

CSS多列column-count的應(yīng)用場景

CSS多列column-count一般運用在分段文章上，如看過老式報紙的人應(yīng)該知道，一篇文章從左到右，從上往下在一個小區(qū)域內(nèi)進(jìn)行閱讀。而不是一篇文章占用整個頁面的寬度。

總結(jié)

相對于前端CSS的column-count多列屬性，該屬性比較冷門了，因為很少有場景需要像老式報紙那樣。但是也可以編寫與其他功能部分的作用。

該案例中的文字導(dǎo)航欄，我們可以輕松實現(xiàn)具有相同距離的導(dǎo)航欄多列布局。同時根據(jù)多列column-count的屬性，我們可以輕松修改多列的寬度，以及列與列之間的樣式，顏色，寬度。使用column-count多列需要注意的一點是，該屬性主要作用于文本內(nèi)容。

在線咨詢

上一篇：HTML是所有網(wǎng)站的主干，所以網(wǎng)絡(luò)上的一切最終都是HTML？
下一篇：PHP筆記(二) HTML表單

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

實現(xiàn)三欄布局的幾種方法

言

使用方式

安裝

全部布局

聲明 display: grid;

居中

雙列

三列

呂形

上下欄

四宮格

六宮格

九宮格

鋪滿

圣杯

雙飛翼

響應(yīng)式

總結(jié)

么是column-count文本多列布局？

列與列之間的間隔column-gap屬性

列間隔的樣式column-rule

CSS多列column-count的應(yīng)用場景

總結(jié)

您的項目需求