父元素内多个子元素,子元素根据内容确定高度,子元素和最高的子元素等高

最新推荐文章于 2025-03-21 09:34:41 发布

何其涛

最新推荐文章于 2025-03-21 09:34:41 发布

阅读量2k

点赞数

分类专栏：解决问题 css 文章标签： css

本文链接：https://blog.youkuaiyun.com/deng1456694385/article/details/87985160

版权

解决问题同时被 2 个专栏收录

35 篇文章

订阅专栏

css

4 篇文章

订阅专栏

在CSS布局中，当父元素内的多个子元素根据内容动态调整高度时，通常难以实现所有子元素与最高子元素保持等高。通过采用Flex布局，可以简便地解决这一问题，使得子元素能自动拉伸至与内容最多的子元素相同的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父元素内多个子元素,子元素根据内容确定高度,子元素和最高的子元素等高

父元素中有多个子元素,父元素高度不确定,子元素高度不确定以内容的高度确定,但是这时候要求子元素等高,也就是按照子元素中内容最多的那个元素的高度确定所有元素的高度,这种需求以普通的布局是很难实现的.

<body>
  <div class="father">
    <div class="child"><span>hello</span><br><span>hello</span><br><span>hello</span><br></div>
    <div class="child"><span>hello</span><br><span>hello</span><br></div>
    <div class="child"><span>hello</span><br></div>
    <div class="child"></div>
  </div>
</body>
<style>
  .father {
    display: inline-block;
    background-color: deepskyblue;
  }

  .child {
    vertical-align: top;
    display: inline-block;
    margin-left: 10px;
    background-color: red;
  }
</style>

在这里插入图片描述

这种情况下要实现三者登高,很麻烦,因为无法使用height:100%,因为父元素高度.但是用flex布局就很高解决,设置子元素align-items:stretch,也就是拉升子元素到父元素高度

<body>
  <div class="father">
    <div class="child"><span>hello</span><br><span>hello</span><br><span>hello</span><br><span>hello</span><br></div>
    <div class="child"><span>hello</span><br><span>hello</span><br></div>
    <div class="child"><span>hello</span><br></div>
    <div class="child"></div>
  </div>
</body>
<style>
  .father {
    display: flex;
    background-color: deepskyblue;
  }

  .child {
    display: inline-block;
    align-items: stretch;
    vertical-align: top;
    margin-left: 10px;
    background-color: red;
  }
</style>

在这里插入图片描述