时间戳

首页 > 解决方案 > 不等高度div的css列对齐

html - 不等高度div的css列对齐

问题描述

我正在尝试重新创建高度不等的 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>

标签： htmlcsssassflexbox

解决方案

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

推荐阅读