这个问题找了很久，因为需求是要类似于瀑布流那样的布局，但是因为用的是layui所以又不想弃用，单独写，所以有了以下解决方案：
html：
<div class="layui-row list-body">
<div class="layui-col-md6 list-wrap">
<div class="layui-card list">
<div class="layui-card-header text-header">
<div class="layui-clear">
<span class="title fl">标题题题题题题题题题题题题</span>
<button class="layui-btn layui-btn-primary post-need fr">按钮</button>
</div>
<p class="intro">文字编辑文字编辑文字编辑文字编辑文字编辑</p>
</div>
<div class="layui-card-body text-body">
<p>文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑</p>
</div>
</div>
</div>
<div class="layui-col-md6 list-wrap">
<div class="layui-card list">
<div class="layui-card-header text-header">
<div class="layui-clear">
<span class="title fl">标题题题题题题题题题题题题</span>
<button class="layui-btn layui-btn-primary post-need fr">按钮</button>
</div>
<p class="intro">文字编辑文字编辑文字编辑文字编辑文字编辑</p>
</div>
<div class="layui-card-body text-body">
<p>文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字</p>
</div>
</div>
</div>
<div class="layui-col-md6 list-wrap">
<div class="layui-card list">
<div class="layui-card-header text-header">
<div class="layui-clear">
<span class="title fl">标题题题题题题题题题题题题</span>
<button class="layui-btn layui-btn-primary post-need fr">按钮</button>
</div>
<p class="intro">文字编辑文字编辑文字编辑文字编辑文字编辑</p>
</div>
<div class="layui-card-body text-body">
<p>文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑<</p>
</div>
</div>
</div>
<div class="layui-col-md6 list-wrap">
<div class="layui-card list">
<div class="layui-card-header text-header">
<div class="layui-clear">
<span class="title fl">标题题题题题题题题题题题题</span>
<button class="layui-btn layui-btn-primary post-need fr">按钮</button>
</div>
<p class="intro">文字编辑文字编辑文字编辑文字编辑文字编辑</p>
</div>
<div class="layui-card-body text-body">
<p>文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑</p>
</div>
</div>
</div>
</div>
css:
.text-banner{
text-align: center;
}
.text-banner h3{
font-size: 24px;
color: #333;
font-weight: 500;
margin-top: 25px;
}
.text-banner p{
font-size: 14px;
color: #999;
line-height: 22px;
margin-top: 16px;
text-align: left;
width: 900px;
margin: 16px auto auto;
}
.text-banner .go-feedback{
margin-top: 20px;
margin-bottom: 15px;
}
.text-header{
height: unset;
line-height: unset;
padding: 15px 15px 15px 15px;
border-bottom: 1px solid #E0E0E0;
}
.text-header .title{
font-size: 16px;
color: #333;
line-height: 30px;
width: calc(100% - 74px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.layui-btn.post-need{
display: none;
border-color: #499DFF;
color: #499DFF;
height: 30px;
line-height: 30px;
padding: 0 12px;
font-size: 12px;
width: 74px;
margin: 0 auto;
}
.post-need:hover{
background-color: #499DFF;
color: #fff;
}
.text-header .intro{
font-size: 13px;
color: #999;
}
.list:hover .post-need{
display: block;
}
.list-wrap .list .text-body{
margin-bottom: 10px;
}
.list-wrap .list .text-body{
padding: 15px 20px 15px 20px;
}
.list-wrap .list .text-body p{
font-size: 14px;
color: #666;
line-height: 30px;
text-indent: 24px;
}
//重要的两句代码
.list-body{
columns: 2;
margin: 15px 0;
}
.list-body .list-wrap{
width: 100%;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
网友评论