html - 对齐不同父容器的子元素

Question

我正在尝试跨容器垂直对齐可变高度元素，即每个容器中的第一个元素相互垂直对齐，每个容器中的第二个元素相互垂直对齐，等等。

我正在使用 flexbox 但不确定这是否可能？或者是否可以使用 CSS Grid？

期望的结果

查看演示，我还没有设法让它工作。

main {
  display: flex;
  flex-wrap: wrap;
}

.container {
  background: grey;
  margin: 0 10px 20px;
  padding: 10px;
  width: 200px;
}

.top {
  background: red;
}

.middle {
  background: blue;
}

.bottom {
  background: green;
}

<main>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too, And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here, Some text here, Some text here</div>
    <div class="middle">And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
</main>

Answer 1

也许带有显示的网格：内容可以帮助您。

main {
  display: grid;
  
  grid-auto-columns: 200px;
  column-gap: 20px;
}

.container {
  display: contents;
}

.top {
  grid-row: 1;
}

.middle {
  grid-row: 2;
}

.bottom {
  grid-row: 3;
}

https://codepen.io/sunnyone/pen/dyGQYBv

如果原始 .container 样式很重要，则可能需要额外的子元素。

Answer 2

试试这个，也许对你有帮助

.container {
  background: grey;
  margin: 0 10px 20px;
  padding: 10px;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

现场演示 - http://codepen.io/anon/pen/oZxaja?editors=1100

Answer 3

要直接回答这个问题，我认为您将无法使用 HTML 结构并仅使用 CSS/flexbox 来做您正在尝试的事情。我可以想办法用 JS 来做这件事，但那会是多么痛苦。

如果可以的话，我认为您可以更轻松地重组 HTML，以便顶部、中间和底部都在各自的行中。您仍然可以将容器放在行内以获得您想要的外观并动态创建它等等，但是要获得对齐，这对我来说似乎更容易......

.row {
  display: flex;
  flex-direction: row;
}

.container {
  background: grey;
  margin: 0 10px 0px;
  padding: 10px;
  width: 200px;
}

.top {
  background: red;
}

.middle {
  background: blue;
}

.bottom {
  background: green;
}

<main>
  <div class="row">
    <div class="container">
      <div class="top">Some text here, Some text here, Some text here</div>
    </div>
    <div class="container">
      <div class="top">Some text here, Some text here</div>
    </div>
  </div>
  
  <div class="row">
    <div class="container">
      <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    </div>
    <div class="container">
      <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here</div>
    </div>
  </div>
  
  <div class="row">
    <div class="container">
      <div class="bottom">And a little here too</div>
    </div>
    <div class="container">
      <div class="bottom">And a little here too, And a little here too</div>
    </div>
  </div>
</main>