Question

我试图在容器中垂直对齐可变高度元素，即每个容器中的第一个元素彼此垂直对齐，每个容器中的第二个元素彼此垂直对齐等等。

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

期望的结果

See demo我尚未设法让它工作。

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>

对齐不同父容器的子元素

3 个答案: