layui 布局 高度不一致时导致的错乱问题解决

这个问题找了很久，因为需求是要类似于瀑布流那样的布局，但是因为用的是layui所以又不想弃用，单独写，所以有了以下解决方案：

html：

 

   

      标题题题题题题题题题题题题

      按钮

   

   

文字编辑文字编辑文字编辑文字编辑文字编辑

 

 

   

文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑

 

 

   

      标题题题题题题题题题题题题

      按钮

   

   

文字编辑文字编辑文字编辑文字编辑文字编辑

 

 

   

文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字

 

 

   

      标题题题题题题题题题题题题

      按钮

   

   

文字编辑文字编辑文字编辑文字编辑文字编辑

 

 

   

文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑<

 

 

   

      标题题题题题题题题题题题题

      按钮

   

   

文字编辑文字编辑文字编辑文字编辑文字编辑

 

 

   

文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑文字编辑

 

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;

}