发现column-count列有Bug求如何解决的后续替代方案

最新推荐文章于 2023-05-25 11:23:17 发布

触新

最新推荐文章于 2023-05-25 11:23:17 发布

阅读量1.1k

点赞数

文章标签：响应式设计 CSS column-count 百分比布局 flex-wrap 前端开发

本文链接：https://blog.csdn.net/weixin_47818467/article/details/115643299

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.columns {column-count:4; column-width: 100px; margin-bottom: 20px;}
.columns-width {column-count: auto; column-width: 100px;}
.columns .col {border: 1px solid #e2e2e2; padding: 10px;height: 100%;
			        overflow: auto;}
.columns-width .col{height: 50px}

</style>
<body>

    <div class="columns">
        <div class="col col1">1</div>
        <div class="col col2">2</div>
        <div class="col col3">3</div>
        <div class="col col3">4</div>
        <div class="col col3">5</div>
        <div class="col col3">6</div>
    </div>
   
</body>
</html>

//关键是这句:style="{width:(100/item.maxRow)+’%’}"
//实现思路是：后台传过来的列数item.maxRow用百分比来分配每列的比重建议不要用column-count有严重bug

<view class="scrollshow">

					<view class="option-div">
						<view @click="radioSubjuetSeleFunc($event,index,indexs)"
						:style="{width:(100/item.maxRow)+'%'}"
							v-for="(items, indexs) in item.optionList" :key="indexs" :data-optionid="items.id"
							class="option-item-div" :data-idx="indexs" :data-questionid="item.id"
							:class="[item.maxRow>1?'whiteSpace':'']"
							>
							<view class="radio-img">
								<image class="icon_sele" src="../../static/img/icon/icon_sele_yx.png"
									v-if="items.isChecked"></image>
								<image class="icon_sele" src="../../static/img/icon/icon_sele_wx.png" v-else></image>
							</view>
							<view class="option-txt"><text class="bl"
									:id="'otherText'+items.id" :data-optionid="items.id" :data-questionid="item.id"
									@keyup="onOtherTextKeyup"
									v-html='items.text.replace(/_______/g, `<view  class="my-input input" contenteditable="true"></view>`)'></text>
							</view>
						</view>
					</view>
				</view>

<style lang="less">
.scrollshow {
		width: 100%;
		overflow: hidden;
		overflow-y: hidden;
		overflow-x: scroll;
	}
		.option-div{
		display: flex;
		//关键
		flex-wrap: wrap;
		// 单列布局
		border:2rpx solid #E0E0E0;
		.option-item-div{
			padding: 30rpx;
			border-bottom: 2rpx solid #E0E0E0;
			display: flex;
			align-items: flex-start;
			
			.icon_sele{
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
			.option-txt{
				
				
			}
		}
		padding: 20rpx 5rpx 30rpx;
		
		
		.option-item-div:last-child{
			border-bottom: none;
		}
	}
</style>

触新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发现column-count列有Bug求如何解决的后续替代方案

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.columns {column-count:4; column-width: 100px; margin-bottom: 20px;}.columns-width {column-count
复制链接

扫一扫