实现子元素多行多列且各自对齐的显示方法

一般情况下如果是一行的多个子元素，用 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>

后面如果有更好的方法再继续补充。

最后编辑于：2020.03.27 13:05:29

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

实现子元素多行多列且各自对齐的显示方法