CSS column-width

admin發表於2019-05-28
CSS

column-width屬性可以設定列的寬度。

關於多列布局的總體介紹參閱CSS columns 多列布局一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
column-width: auto|length;

屬性值解析：

（1）.auto：預設值，它的值由其他相關屬性決定。

（2）.length：規定列的寬度，比如100px。

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

程式碼例項如下：

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

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

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

程式碼分析如下：

（1）.column-width屬性值設定為auto。

（2）.又由於沒有設定其他屬性，所以呈現單列顯示。

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

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

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

程式碼分析如下：

（1）.設定column-width寬度值為auto，column-count屬性值為3。

（3）.於是呈現三列顯示，每一列的寬度根據其條件進行自動調整。

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

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

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

程式碼分析如下：

（1）.規定列寬為150px，列數為3.

（2）.但是實際表現與資料規定並不相同。

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

相關文章