CSS column-gap

admin發表於2019-05-28
CSS

column-gap屬性用來規定列與列之間的距離。

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

語法結構：

[CSS] 純文字檢視 複製程式碼
column-gap: normal |<length>

屬性值解析：

（1）.normal：預設值，預設情況預設值就是當前字型大小，也就是1em。

（2）.length：長度值，可以為px、em或者百分比等。

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

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

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

上面的程式碼可以設定列與列之間的間距為40px。

相關文章