如何在底部

Question

對齊浮動元素是什麼對齊浮動元素

<div> 
    <button>goto</button> 
    <h1>TITLE</h1> 
</div> 

與下面的CSS的首選方式：

button { 
    float: right; 
} 

爲什麼我不能使用類似vertical-align: bottom？我已經看到了一個解決方案，它定義了一個巨大的line-height，但在我看來就像一個黑客。有沒有css3解決方案？

DEMO

Answer 1

有一個CSS3選項，其中包含Flexible Box模塊或簡稱爲flexbox。這是一個候選人的建議，所以它仍然有browser support複雜性。

Internet Explorer上最早的支持是IE10，但它支持使用與當前規範版本不同的語法的舊版本規範，並且需要-ms-前綴。對於IE10 Mobile來說也是如此，它支持2012年制定的暫定版本的語法。然而，IE11支持最新的規格前綴。 Android也只在版本4.4之前支持帶有-webkit-前綴的舊版本規範。 Safari和iOS Safari目前仍需要-webkit-前綴，但支持桌面版本6.1以及iOS版本7.1以上的新規格屬性。作爲常青瀏覽器的Chrome和Firefox可以安全地使用當前規範語法的前綴。而且，如果您關心BlackBerry，則版本10需要使用當前規範屬性的-webkit-前綴，而版本7僅支持較舊的規範。

儘管如此，如果您只有爲現代瀏覽器設計的奢華，flexbox纔是簡單而直觀的。以下是您可以如何爲支持前綴規範的前綴的瀏覽器實現所需功能：

div { 
    background-color: lightgrey; 
    display: flex; /*creates the flexbox on the parent element*/ 
    flex-direction: row; /*the content will be in rows versus columns*/ 
    justify-content: space-between; /*distributes child elements evenly based on the space between them*/ 
} 
h1 { 
    font-size: 40px; 
} 
button { 
    align-self: flex-end; /*aligns just this child element to the bottom of the flexbox parent*/ 
} 

Answer 2

假設你想在你的底部button，你可以絕對定位您button代替：

div { 
    ... 
    position: relative; 
} 

... 

button { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

JSFiddle demo。