li 多列等高的几种实现

最新推荐文章于 2022-04-22 16:44:30 发布

檀小泡泡

最新推荐文章于 2022-04-22 16:44:30 发布

阅读量450

点赞数

分类专栏： CSS 文章标签： css

原文链接：https://blog.csdn.net/userkang/article/details/84345108?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-8&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-8

版权

CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

什么是多列等高
简单的说，就是多个列，但是所有列的高度都希望以最高的那个列为准。

如下图，每个列的高度都靠里面的内容撑起来。
在这里插入图片描述
但是有些情况我们需要每个列能与最高的那个列等齐。如下图：

实现
利用 padding、margin 来实现
table 布局实现
flex 布局实现
来直接看看测试代码吧，可以直接复制代码，查看结果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>多列等高</title>
    <style>
      /* 公共样式 */
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      ul li {
        background: #0b88ec;
      }
      ul li p {
        padding: 10px;
        margin: 0;
        color: #fff;
      }

      /* padding margin 实现样式 */
      .test-1 ul {
        overflow: hidden;
      }
      .test-1 li {
        float: left;
        width: 33.33%;
        padding-bottom: 9999px;
        margin: 0 0 -9999px 0;
      }

      /* table 实现样式 */
      .test-2 ul {
        display: table;
      }
      .test-2 li {
        display: table-cell;
        width: 33.33%;
      }

      /* flex 实现样式 */
      .test-3 ul {
        display: box;
        display: -webkit-flex;
        display: flex;
      }
      .test-3 li {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        width: 0;
      }
    </style>
  </head>
  <body>
    <!-- padding margin 实现 -->
    <h3>padding margin 实现:</h3>
    <div class="test-1">
      <ul>
        <li>
          <p>
            步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。
          </p>
        </li>

        <li><p>步子不非得迈得大，只要朝着正确的方向前进就行。</p></li>

        <li>
          <p>
            步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。步子不非得迈得大，只要朝着正确的方向前进就行。
          </p>
        </li>
      </ul>
    </div>

    <!-- table 实现 -->
    <h3>table 实现:</h3>
    <div class="test-2">
      <ul>
        <li>
          <p>
            步子不非得迈得大，只要朝着正确的方向前进就行。
            步子不非得迈得大，只要朝着正确的方向前进就行。
          </p>
        </li>
        <li><p>步子不非得迈得大，只要朝着正确的方向前进就行。</p></li>
        <li>
          <p>
            步子不非得迈得大，只要朝着正确的方向前进就行。
            步子不非得迈得大，只要朝着正确的方向前进就行。
            步子不非得迈得大，只要朝着正确的方向前进就行。
          </p>
        </li>
      </ul>
    </div>

    <!-- flex 实现 -->
    <h3>flex 实现:</h3>
    <div class="test-3">
      <ul>
        <li>
          <p>
            步子不非得迈得大，只要朝着正确的方向前进就行。
            步子不非得迈得大，只要朝着正确的方向前进就行。
          </p>
        </li>
        <li><p>步子不非得迈得大，只要朝着正确的方向前进就行。</p></li>
        <li>
          <p>
            步子不非得迈得大，只要朝着正确的方向前进就行。
            步子不非得迈得大，只要朝着正确的方向前进就行。
            步子不非得迈得大，只要朝着正确的方向前进就行。
          </p>
        </li>
      </ul>
    </div>
  </body>
</html>

檀小泡泡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
li 多列等高的几种实现

什么是多列等高简单的说，就是多个列，但是所有列的高度都希望以最高的那个列为准。如下图，每个列的高度都靠里面的内容撑起来。但是有些情况我们需要每个列能与最高的那个列等齐。如下图：实现利用 padding、margin 来实现table 布局实现flex 布局实现来直接看看测试代码吧，可以直接复制代码，查看结果<!DOCTYPE html><html lang...
复制链接

扫一扫