浮动div的垂直对齐[关闭]答案

【问题标题】：Vertical alignment of floating divs [closed]浮动div的垂直对齐[关闭]
【发布时间】：2015-11-05 05:54:51
【问题描述】：

我需要创建一行，三个 div 并排放置：

在 div 中，中间的总是垂直对齐的中间，其他的都是垂直对齐的顶部。

我是通过设置完成的

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

这很好用，但现在的要求是，只有最后一个 div 应该垂直底部对齐。（见附件2）：

无论如何，我无法管理它，因为在左右 div 上显示表格单元格和垂直对齐：顶部不允许我垂直对齐底部。

我也尝试在最后一个div上使用绝对位置，但我不知道div的可变高度是在左边还是右边更大

感谢您的帮助！

【问题讨论】：

可以给我们一些html+css代码吗？
在这里使用 flexbox 可能比 display:table-* 更好。
如果你真的想留在桌子上，你可以position:relative最右边的div和position: absolute; bottom: 0px应该在底部垂直对齐的div。
嘿，是的，但是如果最左边的 div 小于最右边的 div 怎么办？那么绝对位置，底部 0 hack 变成了一个不起作用的解决方法，因为最左边的 div 控制着整行的高度。

标签： javascript jquery html css

【解决方案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>

【讨论】：

这样就可以了，非常感谢：还有一个问题：我如何使这个响应式的，以便在没有位置的情况下使 div 中断？设置 flex-wrap: warp 没有帮助。
好的，转储问题，我的解决方案是设置 display:block;当应用某个媒体查询规则时在包装器上

【解决方案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

【讨论】：

虽然这在理论上可以回答问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效