iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
0
自我挑戰組

自我挑戰日記系列 第 20

CSS:column 多欄文字

  • 分享至 

  • xImage
  •  

大家好 /images/emoticon/emoticon37.gif

要作出像報章雜誌的多欄文章
https://ithelp.ithome.com.tw/upload/images/20171225/201074960qJqQKe7Oq.jpg
有個方便的作法
欄位數量也是可以靠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 的寬作排列
https://ithelp.ithome.com.tw/upload/images/20171225/20107496QDIFzR93wS.jpg

h2{
  column-span: all;
}

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

--- 明日待續。


上一篇
CSS:shadows 陰影
下一篇
CSS:shape-outside 文繞圖 circle和ellipse
系列文
自我挑戰日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言