容器高度等于其具有动态高度的重叠子代

Question

请考虑您是一个具有固定宽度height: auto且内部有两个元素的块容器。每个元素都有其自身的高度，该高度取决于其内部的项目数。现在，您希望孩子们位于顶部，彼此重叠。但是，与此同时，您希望自己的身高等于拥有最多物品的孩子的身高。

您认为您可以自己处理它，而不需要怪异的JS向导来照顾您和您的孩子吗？

此外，您的孩子似乎喜欢动态更改其中的物品数量，因此您在这里无法使用固定的高度。

所需结果：

（每个项目向左移一点以便于观看）

是的，一些代码！

<div class="container">

  <div class="child">
    <div class="item"></div>
    <!-- ... -->
  </div>

  <div class="child">
    <div class="item"></div>
    <!-- ... -->
  </div>

</div>

.container {
  width: 300px;
}

.menu {
}

.item {
  height: 30px;
}

?‍? JSFiddle with example

Answer 1

是的，您可以这样做！如果您是CSS grid。

根据规格，如果您将两个元素放在同一单元格中。它们将彼此重叠，并且您可以使用align-items: start;使它们的顶部对齐。

<div class="container">

  <div class="child">
    <div class="item"></div>
    <!-- ... -->
  </div>

  <div class="child">
    <div class="item"></div>
    <!-- ... -->
  </div>

</div>

/** Creating a CSS grid with a single cell */
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'cell';
  align-items: start;
}

/** Putting both children in the first cell */
.child {
  grid-area: cell;
}

.item {
  height: 30px;
}

这是updated JSFiddle来演示解决方案。

CSS网格具有pretty good浏览器范围。不过请确保对IE使用自动前缀。

---

如果您知道另一种/更好的方法，请也添加它，我相信它将很有用。