html - 如何设置 float 和非 float 元素垂直对齐到底部

Question

我正在运行这个 JSFIDDLE我想将 float 和非 float 元素的 vertical-align 属性设置为 bottom，但它不起作用:

这是我的 html 代码:

<div class="main">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

CSS:

div {
    border: 1px solid;
}
.main {
        text-align: center;
}

.main:after {
    content: '';
    clear: both;
    display: block;
}
.main > div {
    vertical-align: bottom;
    width: 20%;
}

.left {
    height: 60px;
    float: left;
    background-color: red;
}

.right {
    height: 40px;
    float: right;
    background-color: blue;
}

.middle {
    height: 20px;
    background-color: green;
    display: inline-block;

}

Answer 1

除非您使用的是表格单元格，否则垂直对齐会根据相邻元素(尤其是文本)对齐元素。

在此处阅读有关垂直对齐的更多信息:

http://phrogz.net/css/vertical-align/index.html

不过，您可以为包装器指定宽度和高度，并将其设置为 position: relative

之后你可以为你的 div 使用绝对定位，将它们设置为 bottom: 0 然后它们将粘在包装器的底部。

这是新的 CSS:

div {
    border: 1px solid;
}
.main {
   position: relative;
   width: 100%;
   height: 100px;
      text-align: center;
}

.main:after {
    content: '';
    clear: both;
        display: block;
}
.main > div {
   width: 20%;
}

.left {
    height: 60px;
    background-color: red;
    position: absolute;
   bottom: 0;
   left: 0;

}

.right {
    height: 40px;
    background-color: blue;
   position: absolute;
   bottom: 0;
   right: 0;
}

.middle {
    height: 20px;
    background-color: green;
   position: absolute;
   transform: translate(-50%, 0%); 
   left: 50%;
   bottom: 0;

}

CODEPEN DEMO