浮动div的垂直对齐

Question

我需要创建一行，其中有三个div并排放置： 在这些div中，中间的div始终垂直居中，其他的则垂直顶部对齐。

我可以通过以下设置来实现：

Container:
display:table
Row:
display:table-row
Cell:
display:table-cell with float:none 

这个方案很好，但现在的要求是只有最后一个div应该垂直底部对齐（见附件2）： 无论如何，我无法做到这一点，因为在左右div上使用display table cell和vertical-align:top不能让我垂直对齐底部。

我还尝试在最后一个div上使用绝对定位，但我不知道div的变量高度是在左侧还是右侧div中更大。

感谢您的帮助！

- Fl0R1D3R

---

我们可以提供一些HTML+CSS代码吗？ - MaximeK

这里最好使用flexbox而不是display:table-*。 - CBroe

如果你真的想使用表格，你可以将最右边的 div 设置为 position:relative，并将应该垂直对齐底部的 div 设置为 position:absolute; bottom:0px。 - Jack Guy

嘿，是的，但如果最左边的 div 比最右边的 div 小怎么办？那么 position absolute，bottom 0 的 hack 就变成了一个无法工作的解决方法，因为最左边的 div 控制整行的高度。 - Fl0R1D3R

Answer 1

flexbox可以轻松实现这个功能。

* {
  box-sizing: border-box;
}
.wrap {
  width: 80%;
  margin: 5vh auto;
  border: 1px solid grey;
  display: flex;
}
.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid green;
  padding: 1em;
  margin: 1em;
}
.left,
.right {
  flex: 2;
  /* just a number...means they are twice as wide as the middle */
}
.middle {
  justify-content: center;
}
header {
  flex: 0 0 25px;
  background: red;
  margin-bottom: 1em;
}
nav {
  flex: 0 0 35px;
  background: blue;
  margin-bottom: 1em;
}
.content {
  flex: 0 0 auto;
  background: orange;
  margin-bottom: 1em;
}
footer {
  height: 50px;
  background: green;
  width: 50px;
  align-self: flex-end;
  width: 100%;
  margin-top: auto;
}

<div class="wrap">
  <div class="col left">
    <header></header>
    <nav></nav>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate cum magnam maiores unde consequuntur, similique deserunt delectus omnis expedita in, laborum praesentium consequatur
      eius adipisci saepe rerum reprehenderit nostrum temporibus.</div>
    <footer></footer>
  </div>
  <div class="col middle">
    <div class="content">Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="col right">
    <header></header>
    <nav></nav>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, modi!</div>
    <footer></footer>
  </div>
</div>

- Paulie_D

---

这样做就可以了，非常感谢：还有一个问题：如何使其响应式，以便div在没有位置的情况下断行？设置flex-wrap: warp没有帮助。 - Fl0R1D3R

好的，问题有点简单，我的解决方案是在特定的媒体查询规则应用时，在包装器上设置display:block;。 - Fl0R1D3R

Answer 2

我会使用flexbox来实现这个：http://codepen.io/pjetr/pen/KpYzqj

div { display: flex; }
/* I was required to add some code, to accompany the codepen link :) */

但请记得检查这个链接：http://caniuse.com/#feat=flexbox

- Pjetr

---

虽然这理论上回答了问题，但最好在此处包含答案的基本部分并提供参考链接。仅有链接的答案可能会因为链接页面的更改而失效。 - Paulie_D