html - 如何在底部对齐 float 元素

Question

对齐 float 元素的首选方式是什么

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

使用以下 CSS:

button {
    float: right;
}

为什么我不能使用像 vertical-align: bottom 这样的东西？我见过定义一个巨大的 line-height 的解决方案，但在我看来这就像一个 hack。有 css3 解决方案吗？

DEMO

Answer 1

Flexible Box 有一个 CSS3 选项 模块，简称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*/
}