实现子元素多行多列且各自对齐的显示方法
2020-03-25 本文已影响0人
不会潜水的猫小喵
一般情况下如果是一行的多个子元素，用 flex 的 space-between 可以轻松实现；如果是子元素个数不定而且可能多行显示的情况，总个数如果可以按照每行显示的个数整除的话也没问题，但是如果不能整除的话就不好用了。
比如我们想要的效果是：
图一
但实际上用了flex 的 space-between之后会变成这样子：
图二
项目中也会经常遇到这样的布局，在此记录一下能够实现图一效果的方法。
方法一、flex+空元素
掘金上看到的解决方法，简单好用，查看链接。
方法二、嵌套标签+左浮动
这种方法需要子元素里多嵌套一层标签，先计算好每行要显示的子元素宽度，用百分比表示。然后设置子元素 padding 值，这样子元素嵌套的标签之间就会产生间距。因为 padding 值会使左右两边的列与边界产生间距，通过 calc 设置父元素的宽度，加上多产生的间距值，这样子元素充满的宽度就正好是之前的父元素宽度。再将父元素整个左移一半多产生的间距值，父元素会继续居中显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
margin: 20px auto;
padding: 30px 200px;
background: #eee;
}
ul {
margin-left: -10px;
padding-top: 10px;
width: calc(100% + 20px);
background:rgba(205, 230, 199, 0.6);
overflow: auto;
}
ul li {
float: left;
list-style: none;
width: 33.33%;
height: 30px;
margin-bottom: 10px;
padding: 0 10px;
}
ul li span {
display: inline-block;
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 5px;
background: pink;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<ul>
<li><span>天空之城</span></li>
<li><span>龙猫</span></li>
<li><span>千与千寻</span></li>
<li><span>悬崖上的金鱼姬</span></li>
<li><span>哈尔的移动城堡</span></li>
<li><span>起风了</span></li>
<li><span>幽灵公主</span></li>
<li><span>魔女宅急便</span></li>
</ul>
</div>
</body>
</html>
后面如果有更好的方法再继续补充。
