1. CSS响应式多列布局
有没有过要把一段文本分成多列显示的需求?
可以把文本分别放在不同的元素中,然后分别添加样式。可是,纯粹为了添加样式而修改标记并不是值得提倡的。CSS多列布局规范描述了如何通过多列显示文本。比如以下标记:
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
<!-- 省略很多文本 -->
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
<!-- 省略很多文本 -->
</p>
</main>
使用CSS多列布局可以通过几种方式让文本分成多列显示。可以给每一列设定固定的列宽(比如12em),也可以指定内容需要填充的列数(比如3)。
代码如下,设定列宽:
main{
column-width: 12em;
}
完整代码如下:
<!doctype html>
<html c