HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<link rel="stylesheet" type="text/css" href="column.css">
</head>
<body>
<div>
<p>When the whole world is about to rain, let’s make it clear in our heart together.</p>
<p>Those that have gone won’t come back again. Those coming back are no longer perfect.</p>
<p>Sometimes you need to walk alone just to show that you can .</p>
<p>Patience is bitter, but its fruit is sweet.</p>
<p>Sometimes you can't see yourself clearly until you see yourself through the eyes of others.</p>
<p>When the whole world is about to rain, let’s make it clear in our heart together.</p>
<p>Those that have gone won’t come back again. Those coming back are no longer perfect.</p>
<p>Sometimes you need to walk alone just to show that you can .</p>
<p>Patience is bitter, but its fruit is sweet.</p>
<p>Sometimes you can't see yourself clearly until you see yourself through the eyes of others.</p>
<p>When the whole world is about to rain, let’s make it clear in our heart together.</p>
<p>Those that have gone won’t come back again. Those coming back are no longer perfect.</p>
<p>Sometimes you need to walk alone just to show that you can .</p>
<p>Patience is bitter, but its fruit is sweet.</p>
<p>Sometimes you can't see yourself clearly until you see yourself through the eyes of others.</p>
<p>When the whole world is about to rain, let’s make it clear in our heart together.</p>
<p>Those that have gone won’t come back again. Those coming back are no longer perfect.</p>
<p>Sometimes you need to walk alone just to show that you can .</p>
<p>Patience is bitter, but its fruit is sweet.</p>
<p>Sometimes you can't see yourself clearly until you see yourself through the eyes of others.</p>
</div>
</body>
</html>CSS代码
div{
column-count: 3;
/*控制分为几栏*/
column-gap: 40px;
/*规定列间的间隔*/
column-rule: 5px outset cornflowerblue;
/*5px代表分割线的宽度，outset样式，后面的是颜色*/
}效果：
