Question

我正在运行此JSFIDDLE并且我想为浮点和非浮点元素设置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

除非您使用表格单元格，否则vertical-align会将元素与相邻元素（尤其是文本）对齐。

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

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

如何将float和non float元素垂直对齐到底部

1 个答案: