如何設置浮動和非浮動元素垂直對齊到下

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

除非你有一個表格單元格中，垂直對齊對齊ELEM關於相鄰要素，特別是文本。

瞭解更多關於垂直對齊的位置：

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