CSS3 的多列布局(Multicolumn Layout)允许你将文本分成多个列,使页面看起来更加美观。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多列布局</title><style>.multicolumn-container {column-count: 3; /* 列数 */column-gap: 20px; /* 列之间的间隔 */column-rule: 1px solid #ddd; /* 列之间的分隔线样式 */padding: 20px;}/* 可选样式,调整列中的内容 */.multicolumn-container p {margin-bottom: 0;}</style>
</head>
<body><div class="multicolumn-container"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget nulla vitae justo convallis fermentum. Integer nec cursus justo. In hac habitasse platea dictumst.</p><p>Curabitur vel leo non ex fermentum sodales. Fusce auctor elit vel massa tincidunt, ac blandit ex auctor. In laoreet justo sit amet diam malesuada, non euismod dui fermentum.</p><p>Proin vitae urna ut ligula vestibulum vulputate vitae ut libero. Suspendisse hendrerit ex a diam venenatis, vel facilisis ex vulputate. Sed vel fringilla elit.</p><!-- 添加更多内容 -->
</div></body>
</html>
column-count
: 指定列的数量。column-gap
: 指定列之间的间隔。column-rule
: 列之间的分隔线样式,可以设置宽度、样式和颜色。