CSS column-span

admin發表於2019-05-28
CSS

column-span屬性用來規定跨越的列數。

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

語法結構：

[CSS] 純文字檢視 複製程式碼
column-span: 1 || all;

引數解析:

（1）.1：預設值，表示不跨越任何列。

（2）.all：表示跨越所有的列。

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

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

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

上述程式碼設定h1元素只能橫跨一列，所以會在左上部顯示。

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

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

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

上述程式碼將column-span屬性值設定為all，也就是它可以跨越所有的列。

這裡只有兩列，所以h1元素可以跨域兩列，位於文字的上方。

相關文章