不等高度div的css列对齐答案

【问题标题】：css column alignment for unequal height divs不等高度div的css列对齐
【发布时间】：2021-11-16 05:13:49
【问题描述】：

我正在尝试重新创建高度不等的 div 对齐。这是 JSFiddle 链接：jsfiddle

根据示例给出，如果只有 1 个孩子存在，则它应该居中，否则孩子应该在 2 列中并排。我使用 flex 实现了这一点，但我面临一个问题，如果孩子的身高很大，它会留下一个很大的空间，如 div “这个盒子上方的奇怪空间”所示。

SCSS 代码：

body {
  background: grey;  
}
.container {
  max-width: 500px;
  ul {
    list-style-type: none;
    background: white;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    >li {
      border: 2px solid black;
      width: 42%;
      height: fit-content;
      padding: 5px;
      margin: 10px;
    }
  }
}

HTML：

<div class="container">
  <ul class="parent">
    <li>child 1 </li>
  </ul>
</div>

<div class="container">

  <ul class="parent">
    <li>child 1 </li>
    <li>child 2 child 2</li>
  </ul>
</div>

<div class="container">

  <ul class="parent">
    <li>child 1 </li>
    <li>child 2 child 2</li>
    <li>child child child child child child child child v child child child child child child child child child child child child child child </li>
    <li>child child</li>
    <li>child child</li>
    <li>weird space above this box</li>
    <li>child child</li>
  </ul>
</div>

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
@Paulie_D 我提供了一个带有代码的小提琴链接。它不是无效的，它是我创建的一个工作小提琴链接，而不是我正在处理的网站的一些示例链接。
小提琴是不可接受的。代码必须在问题中，而不是单独的链接。如果 JSF 出现故障（它经常出现这种情况），您的链接将毫无用处，

标签： html css sass flexbox

【解决方案1】：

我认为您要求的是两列的高度相等？从> li css 块中删除height: fit-content;，高度应该相等。

【讨论】：

【解决方案2】：

您可以从子项中删除高度属性。这将导致两个孩子都达到全高。

身高：适合内容；

【讨论】：