CSS：column 多欄文字

DAY 20

自我挑戰組

2018鐵人賽

4225 瀏覽

要作出像報章雜誌的多欄文章

有個方便的作法
欄位數量也是可以靠css的值改變

<div class="box">
  <h2>冷氣團</h2>
  <p>文章</p>
</div>

HTML 只需要一個 div 包著內文

.box{
  width: 750px;
  margin: 0 auto;
  color: #666;
  
  column-count: 3;
  column-gap: 22px;
  column-rule: 2px dashed #222;
}

最後的3個屬性
就是決定欄位的排列
column-count 欄位數量
column-gap 欄與欄的間距預設值 16px 1em
column-rule 增加欄與欄之間的分隔線

標題要跨越內文
只增加 column-span 屬性
就會以 div 的寬作排列

h2{
  column-span: all;
}

參考資料
http://zh-tw.learnlayout.com/column.html
https://www.w3schools.com/cssref/css3_pr_column-gap.asp

--- 明日待續。

系列文

自我挑戰日記共 30 篇

33 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

立即登入留言