移动端流式布局

最新推荐文章于 2024-09-28 15:35:33 发布

幼儿园吃饭第一名949

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量86

点赞数

分类专栏： html与css 前端文章标签： css

本文链接：https://blog.csdn.net/qq_45547674/article/details/114478162

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html与css

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS的column-count属性实现移动端的流式布局，通过设置列数和column-gap调整布局与间距。同时强调了子元素不应设置margin，而应使用padding以避免影响布局计算。该方法适用于创建两列布局并减少列间缝隙。

摘要由CSDN通过智能技术生成

移动端流式布局

第一种：利用column-count属性

<view class="greatGood">
	<view class="greatGoodItem" v-for="(item,index) in great" :key="index"
				:style="{backgroundColor:item.backColor,height:item.height+'px'}" >

	</view>
</view>

    .greatGood {
		width: 100%;
		column-count: 2;
		
		-webkit-column-count: 2;
        -o-column-count: 2;
        -ms-column-count: 2;
        -moz-column-count: 2;
        
		column-gap: 0;

        -webkit-column-gap: 1px;
        -o-column-gap: 1px;
        -ms-column-gap: 1px;
        -moz-column-gap: 1px;
	}

	.greatGood>view {
		width: 100%;
	}