CSS columns

admin發表於2019-05-28
CSS

columns是一個複合屬性，用於設定列數和列的寬度。

屬性非常簡單，但是其中有需要地方需要特別注意，下面會通過程式碼實力說明。

語法結構：

[CSS] 純文字檢視 複製程式碼
columns：[ column-width ] || [ column-count ]

屬性值說明：

（1）.column-width：可選，規定每一列的寬度。

（2）.column-count：可選，規定列的數量。

關於瀏覽器支援度本文不作介紹，具體可以http://www.caniuse.com/網站查詢。

複合屬性中的每一個屬性都可以拿出來單獨設定，具體可以參閱如下兩篇文章：

（1）.column-width參閱CSS column-width 屬性一章節。

（2）.column-count參閱CSS column-count 屬性一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.columns {
  border: 1px solid #ccc;
  font-size:14px;
  width: 400px;
  margin: 20px auto;
  -webkit-columns:80px 3;
  -moz-columns:80px 3;
  columns:80px 3;
 }
</style>
</head>
<body>
<div class="columns">
螞蟻部落前端致力於分享前端基礎與進階知識，運營已經有四年有餘。
名字"螞蟻部落"源於小團隊崇尚奮鬥與努力，也認識到，一個人再強，力量也是微薄的，就像一隻小螞蟻，但是如果團結起來，則會產生巨大的力量，再強調一點，我們不崇尚996，但是我們崇尚個人自由選擇的努力與奮鬥。教程內容大多數是螞蟻部落團隊根據自己的開發經驗與應用體會精心撰寫，希望能夠打造一款適合於前端初學者或者需要從初學進階的朋友的精品教程。當然內容難免會存在一些瑕疵或者不當之處，很多螞蟻部前端的網友給予了熱心的指正，本站也會在第一時間進行了修正。
今天螞蟻部落前端公眾號正式開啟，以後會持續分享與前端相關的知識點或者程式設計師生活相關的話題，與大家進行進一步的交流，感謝大家的支援。
</div>
</body>
</html>

上述程式碼簡單演示了columns屬性的用法，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/140457ahm6hnm61fk686cd.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過columns屬性設定列的寬度為80px，劃分為三列。

（2）.列與列之間有一個間隔，可以通過column-gap屬性設定。

雖然我們設定列寬為80px，但是通過簡單測量可以發現每列的寬度要大於80px。

也就是說，我們所固定的寬度在實際表現中並不一定精確，再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.columns {
  border: 1px solid #ccc;
  font-size:14px;
  width: 400px;
  margin: 20px auto;
  -webkit-columns:150px 3;
  -moz-columns:150px 3;
  columns:150px 3;
 }
</style>
</head>
<body>
<div class="columns">
螞蟻部落前端致力於分享前端基礎與進階知識，運營已經有四年有餘。
名字"螞蟻部落"源於小團隊崇尚奮鬥與努力，也認識到，一個人再強，力量也是微薄的，就像一隻小螞蟻，但是如果團結起來，則會產生巨大的力量，再強調一點，我們不崇尚996，但是我們崇尚個人自由選擇的努力與奮鬥。教程內容大多數是螞蟻部落團隊根據自己的開發經驗與應用體會精心撰寫，希望能夠打造一款適合於前端初學者或者需要從初學進階的朋友的精品教程。當然內容難免會存在一些瑕疵或者不當之處，很多螞蟻部前端的網友給予了熱心的指正，本站也會在第一時間進行了修正。
今天螞蟻部落前端公眾號正式開啟，以後會持續分享與前端相關的知識點或者程式設計師生活相關的話題，與大家進行進一步的交流，感謝大家的支援。
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/140527tzr3so366l6wzyvm.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到雖然設定有三列，但是實際表現只有兩列。

最後總結如下，column-width和column-count的表現並不總是精確的，他會收到容器總體寬度與column-gap等屬性的影響，column-width規定的實質是列的最小寬度，column-count規定的是列的最大數目。 

相關文章