<div class="ul-group-title">修复统一高度</div>
<div class="ul-post-block-list">
<div class="ul-post-block-item" data-repeat="4">
<div class="poster ul-demo-img-bg"></div>
<div class="title">PHP基金会年预算已达300万元 </div>
<div class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </div>
</div>
<div class="ul-post-block-item">
<div class="poster ul-demo-img-bg"></div>
<div class="title">PHP基金会年预算已达300万元 </div>
<div class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </div>
</div>
</div>
<div class="ul-group-title">固定块高度</div>
<div class="ul-post-block-list fixed-height">
<div class="ul-post-block-item" data-repeat="4">
<div class="poster ul-demo-img-bg"></div>
<div class="title">PHP基金会年预算已达300万元 </div>
<div class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </div>
</div>
<div class="ul-post-block-item">
<div class="poster ul-demo-img-bg"></div>
<div class="title">PHP基金会年预算已达300万元 </div>
<div class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </div>
</div>
</div>
.ul-post-block-list {
$spaceSize: 8px;
$colCount: 3;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
margin: -$spaceSize;
.ul-post-block-item {
margin: $spaceSize;
width: calc((100%/$colCount) - $spaceSize * 2);
align-self: normal;
&:hover {
background-color: #efefef;
}
.poster {
width: 100%;
height: 120px;
}
.title {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: #333;
margin: 6px;
}
.desc {
margin: 6px;
font-size: 12px;
line-height: 20px;
color: #999;
}
}
&.fixed-height {
.ul-post-block-item {
.title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.desc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
}
}
.ul-post-block-list {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
margin: -8px;
}
.ul-post-block-list .ul-post-block-item {
margin: 8px;
width: calc((100%/$colCount) - $spaceSize * 2);
align-self: normal;
}
.ul-post-block-list .ul-post-block-item:hover {
background-color: #efefef;
}
.ul-post-block-list .ul-post-block-item .poster {
width: 100%;
height: 120px;
}
.ul-post-block-list .ul-post-block-item .title {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: #333;
margin: 6px;
}
.ul-post-block-list .ul-post-block-item .desc {
margin: 6px;
font-size: 12px;
line-height: 20px;
color: #999;
}
.ul-post-block-list.fixed-height .ul-post-block-item .title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.ul-post-block-list.fixed-height .ul-post-block-item .desc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
<view class="ul-group-title">修复统一高度</view>
<view class="ul-post-block-list">
<view class="ul-post-block-item" data-repeat="4">
<view class="poster ul-demo-img-bg"></view>
<view class="title">PHP基金会年预算已达300万元 </view>
<view class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </view>
</view>
<view class="ul-post-block-item">
<view class="poster ul-demo-img-bg"></view>
<view class="title">PHP基金会年预算已达300万元 </view>
<view class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </view>
</view>
</view>
<view class="ul-group-title">固定块高度</view>
<view class="ul-post-block-list fixed-height">
<view class="ul-post-block-item" data-repeat="4">
<view class="poster ul-demo-img-bg"></view>
<view class="title">PHP基金会年预算已达300万元 </view>
<view class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </view>
</view>
<view class="ul-post-block-item">
<view class="poster ul-demo-img-bg"></view>
<view class="title">PHP基金会年预算已达300万元 </view>
<view class="desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </view>
</view>
</view>