要作出像報章雜誌的多欄文章
有個方便的作法
欄位數量也是可以靠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;
}
標題要跨越內文
只增加 column-span 屬性
就會以 div 的寬作排列
h2{
column-span: all;
}
參考資料
http://zh-tw.learnlayout.com/column.html
https://www.w3schools.com/cssref/css3_pr_column-gap.asp
--- 明日待續。