一、代码
主要是column属性
column-count: auto;
column-width: 150px;
column-gap: 60px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.waterfalls-flow-box {
column-count: auto;
column-width: 150px;
column-gap: 60px;
margin: 80px;
}
.waterfalls-flow-box .item {
margin-bottom: 60px;
/*这两个属性，解决内容被隔断*/
height: 100%;
overflow: hidden;
}
.waterfalls-flow-box .item .title {
color: #ff6a00;
font-size: 14px;
line-height: 14px;
margin-bottom: 20px;
font-weight: 600;
}
.waterfalls-flow-box .item p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
color: #181818;
font-size: 14px;
padding: 8px 0;
}
.waterfalls-flow-box .item p:hover {
color: #ff6a00;
cursor: pointer;
}
</style>
</head>
<body>
<div class="waterfalls-flow-box">
<div class="item">
<div class="title">序列 1</div>
<div>
<p>内容 </p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 2</div>
<p>内容 2</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
<div class="item">
<div class="title">序列 3</div>
<div>
<p>内容 3</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 4</div>
<div>
<p>内容 3</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 5</div>
<div>
<p>内容 3</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 6</div>
<div>
<p>内容 3</p>
<p>我是多行</p>
<p>我是多行</p>
<p>是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 7</div>
<div>
<p>内容 3</p>
<p>我是多行</p>
<p>我是是是多行</p>
<p>我是多行</p>
<p>我是多多多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 8</div>
<div>
<p>内容 3</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是我是多行</p>
<p>我是多是多行</p>
<p>我是多多行</p>
<p>我是多行多行多行</p>
<p>我是多行</p>
<p>我是多行多行多行多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 9</div>
<div>
<p>我内容比较多多多多多多</p>
<p>我内容比较多多多多多多</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 10</div>
<div>
<p>内容 3</p>
<p>我是多行</p>
<p>我是多是多是多行</p>
<p>我是行</p>
<p>我是行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 11</div>
<div>
<p>内容 3</p>
<p>我是多行</p>
<p>我行</p>
<p>我是多是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 12</div>
<div>
<p>内容 13</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行我是多行我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 13</div>
<div>
<p>内容 4</p>
<p>我是多行</p>
<p>我是多行是多行是多行是多行是多行是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行是多行是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 14</div>
<div>
<p>内容 4</p>
<p>我是多行</p>
<p>我是多行是多行</p>
<p>我是多行</p>
<p>我是多行是多行是多行是多行</p>
<p>我是多行</p>
<p>我是多多多行</p>
<p>我是多多多行</p>
<p>我是多多多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 15</div>
<div>
<p>内容 4</p>
<p>我是多行</p>
<p>我是多多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行我是多行我是多行</p>
<p>我是多行我是多行我是多行</p>
<p>我是多行我是多行我是多行</p>
<p>我是多行我是多行我是多行</p>
<p>我是多行我是多行我是多行</p>
<p>我是多行我是多行我是多行</p>
<p>我是多行我是多行我是多行</p>
<p>我是多行我是多行我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 16</div>
<div>
<p>内容 4</p>
<p>我是多行</p>
<p>我是多行多行</p>
<p>我是多行</p>
<p>我是我是多行</p>
<p>我是多行</p>
<p>我是多是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 17</div>
<div>
<p>内容 4</p>
<p>我是多多多多多行</p>
<p>我是多行</p>
<p>我是多是多是多行</p>
<p>我是多行是多行</p>
<p>我是多行</p>
<p>我是</p>
<p>我是多行</p>
<p>我是多是多是多是多是多行</p>
<p>我是多是多是多是多是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 18</div>
<div>
<p>内容 4</p>
<p>我是多是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行是多行</p>
<p>我是多行</p>
<p>我是多是多是多是多是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 19</div>
<div>
<p>内容 4</p>
<p>我是多多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多多多多行</p>
<p>我是多行</p>
<p>我是多多多多多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 20</div>
<div>
<p>内容 4</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行是多行是多行是多行是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是</p>
<p>我是</p>
<p>我是</p>
<p>我是</p>
<p>我是多行</p>
<p>我是多多多多多多行</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行</p>
</div>
</div>
<div class="item">
<div class="title">序列 21</div>
<div>
<p>内容 4</p>
<p>我是多行</p>
<p>我是多行</p>
<p>我是多行我是多行</p>
<p>我是多行</p>
<p>我是多行我是多行</p>
<p>我是多行</p>
<p>我是多是多是多是多是多行</p>
<p>我是多行</p>
<p>我是多行我是多行</p>
<p>我是多行</p>
<p>我是多是多是多是多是多行</p>
<p>我是多行</p>
</div>
</div>
</div>
</body>
<script>
</script>
</html>