效果展示
分栏的好处： 段落分栏的好处是让阅读者看得更加通俗易懂方便理解同时也是比较美观的。
实际效果：
当页面宽度大于640px展示为三栏
当页面宽度介于400px-600px直接时展示为二栏
当页面宽度小于400px展示为一栏
HTML代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>分栏练习</title>
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<h1>一起读书网</h1>
<article>
<p>
南京扬子江隧道是双管双层八车道X形隧道，分别经南北两条线路穿越长江，两条隧道均为上下两层，每层单向二车道，上层为江北至江南方向，下层为江南至江北方向，南线全长7363米，北线全长7014米，整个工程总投资约52亿元人民币。
</p>
<p>
南京扬子江隧道于2015年7月2日顺利实现全线贯通，2016年1月1日正式通车，这是世界上同类隧道中规模最大、长度最长、地质最复杂、水压最高的隧道，被誉为“江底70米深处的世界级工程”。
</p>
<p>
该隧道设计时速80公里，限速70公里，设计日通行车辆十万辆，由于距离南京长江大桥最近，南京扬子江隧道可以有效地疏解目前已是全天候超负荷运转的长江大桥的交通压力。
</p>
<p>
此外，扬子江隧道的建成也为南京长江大桥的修缮争取了时间。自1968年通车以来，大桥已经持续工作了50年，必须进行一次全面、系统的修缮。在此期间，扬子江隧道承担了大桥的全部交通流量，可以称得上是南京长江大桥的“继任者”。
</p>
<p class="ad">
<img src="imgs/ad.jpg" alt="" />
</p>
<p>
南京扬子江隧道是双管双层八车道X形隧道，分别经南北两条线路穿越长江，两条隧道均为上下两层，每层单向二车道，上层为江北至江南方向，下层为江南至江北方向，南线全长7363米，北线全长7014米，整个工程总投资约52亿元人民币。
</p>
<p>
南京扬子江隧道于2015年7月2日顺利实现全线贯通，2016年1月1日正式通车，这是世界上同类隧道中规模最大、长度最长、地质最复杂、水压最高的隧道，被誉为“江底70米深处的世界级工程”。
</p>
<p>
该隧道设计时速80公里，限速70公里，设计日通行车辆十万辆，由于距离南京长江大桥最近，南京扬子江隧道可以有效地疏解目前已是全天候超负荷运转的长江大桥的交通压力。
</p>
<p>
此外，扬子江隧道的建成也为南京长江大桥的修缮争取了时间。自1968年通车以来，大桥已经持续工作了50年，必须进行一次全面、系统的修缮。在此期间，扬子江隧道承担了大桥的全部交通流量，可以称得上是南京长江大桥的“继任者”。
</p>
</article>
</body>
</html>
CSS代码块
body {
font-size: 14px;
color: #555;
line-height: 1.5;
}
@media screen and (max-width: 400px) {
article {
column-count: 1;
}
}
@media screen and (max-width: 640px) {
article {
column-count: 2;
}
}
@media screen and (min-width: 640px) {
article {
column-count: 3;
}
}
article {
width: 90%;
margin: 0 auto;
/* 设置列宽实现分列效果 */
columns: 200px 3;
column-gap: 5%;
column-rule: aqua 3px double;
text-indent: 2em;
}
article p.ad {
break-inside: avoid;
column-span: all;
text-indent: 0;
}
article img {
max-width: 100%;
}
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
