css3 瀑布流布局遇見截?cái)嘞乱涣姓故竞蟀虢噩F(xiàn)象
- 注：css3實(shí)現(xiàn)瀑布流布局簡(jiǎn)直不要太香～～～～～
場(chǎng)景-在uniapp項(xiàng)目中
當(dāng)瀑布流布局column-grap:10px 相鄰兩列之間的間隙為10px，column-count:2,2列展示時(shí)，就出現(xiàn)了截?cái)鄦栴}，如下圖：
代碼如下：
<view clss="feeds-comtainer">
<view class="feeds-box" v-for="(item,index) in feeds" :key="index" >
......
</view>
</view>
.feeds-comtainer{
column-count: 2;
column-gap: 10px;
}
.feeds-box{
width: 370upx;
border-radius: 15upx;
border: 1rpx solid #eee;
overflow: hidden;
background-color: #fff;
margin-bottom: 10upx;
}
問題所在：需要個(gè)feeds-box容器設(shè)置高度，否則含有圖片的容器布局會(huì)錯(cuò)位展示；如下設(shè)置則恢復(fù)正常
修改后的代碼如下：
.feeds-box{
height:100%;
width: 380upx;
border-radius: 15upx;
border: 1rpx solid #eee;
overflow: hidden;
background-color: #fff;
margin-bottom: 10upx;
overflow: auto;
}
css3瀑布流布局還有其他屬性
.column-rule屬性來設(shè)置邊框的樣式
包括分割線的顏色、樣式、寬度。其語法格式為：column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>
簡(jiǎn)單的例子：文章來源：http://www.zghlxwxcb.cn/news/detail-642358.html
view{
column-rule: 1px solid #ccc;
}
這里就不給實(shí)例了，感興趣的可以自己去嘗試一下文章來源地址http://www.zghlxwxcb.cn/news/detail-642358.html
到了這里，關(guān)于css3 瀑布流布局遇見截?cái)嘞乱涣姓故竞蟀虢噩F(xiàn)象的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
