h5学习笔记： space-between 左右两列不跟随问题

最新推荐文章于 2024-03-20 20:27:25 发布

hero82748274

最新推荐文章于 2024-03-20 20:27:25 发布

阅读量1.3k

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/90724931

版权

javascript和Egret相关专栏收录该内容

97 篇文章 4 订阅

订阅专栏

最近做小程序的时候遇到使用flex的时候使用space-between 后出现一个样式布局的问题，查阅了??一些资料发现还是网上有方案记录解决，所以为了保险还是先把问题记录下来。这个问题比较常见，出现现象。看看如下

我们先看看现象，可以看到列表出现不平均的问题。
在这里插入图片描述

看看如下的代码，这个代码很简单，采用了flex布局，借助了 justify-content: space-between进行布局，意图明显，只是发现问题和自身想的不一样。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>案例测试</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
	</head>
	<style>
		html,body{
			margin: 0;
			padding: 0;
		}
		.ui-list{
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between;
		}
		
		.ui-list-item{
			width: 33%;
			height: 100px;
			background: yellowgreen;
			border: 1px solid red;
			box-sizing: border-box;
		}
		
	</style>
	<body>
		<div class="ui-list">
			<div class="ui-list-item"></div>
			<div class="ui-list-item"></div>
			<div class="ui-list-item"></div>
			<div class="ui-list-item"></div>
			<div class="ui-list-item"></div>
			<div class="ui-list-item"></div>
			<div class="ui-list-item"></div>
			<div class="ui-list-item"></div>
		</div>
	</body>
</html>

解决这个问题可以使用一种伪类办法处理这个问题，解决后可以显示正常了。

.ui-list::after{
		 content: '';
		 display: block;
         width: 33%;
         visibility: hidden;
}

在这里插入图片描述

hero82748274

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5学习笔记： space-between 左右两列不跟随问题

最近做小程序的时候遇到使用flex的时候使用space-between 后出现一个样式布局的问题，查阅了
复制链接

扫一扫

专栏目录

h5学习笔记： space-between 左右两列不跟随问题

“相关推荐”对你有帮助么？