浮动div的垂直对齐 [英] Vertical alignment of floating divs

问题描述

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

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

我是用这个设置的。

 容器：
 display：table 
行：
 display：table-row 
单元格：
 display：table-cell with float：none 
  

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

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

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

解决方案

flexbox

code>可以轻松做到这一点

  * {box-sizing：border-box;}。wrap {width：80％; margin：5vh auto; border：1px solid gray; display：flex;}。col {display：flex; flex-direction：column; flex：1; border：1px solid green; padding：1em; margin：1em;}。left，.right {flex：2; / *只是一个数字...意味着它们的宽度是中间值的两倍* /} middle {justify-content：center;} header {flex：0 0 25px;背景：红色; margin-bottom：1em;} nav {flex：0 0 35px;背景：蓝色; margin-bottom：1em;}。content {flex：0 0 auto;背景：橙色; margin-bottom：1em;} footer {height：50px;背景：绿色; 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，阻碍。 Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Cupiditate cum magnam maiores unde consequuntur，similique deserunt delectus omnis expedita in，laborum praesentium consequuel eius adipisci saepe rerum reprehenderit norstrum 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>  

I need to create a row, where three divs are positioned side by side:

In the divs, the middle one is always vertical aligned middle and the other ones are vertical aligned top.

I did this with the settings

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

This works fine, but now the requirement is, that only the last div should become vertical bottom aligned. (see attachment 2):

Anyways, I couldn't manage it, since display table cell and vertical-align:top on the left and right div doesn't allow me to vertical align bottom.

I also tried to use position absolute on the last div, but I can't know if the variable height of the div is bigger in the left or in the right div

thanks for your help!

解决方案

flexbox can do that quite easily

* {
  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的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！