Question

对齐浮动元素的首选方法是什么

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

使用以下css：

button {
    float: right;
}

为什么我不能使用vertical-align: bottom之类的内容？我已经看到了定义巨大line-height的解决方案，但在我看来，这似乎是一个黑客。有没有css3解决方案？

DEMO

Answer 1

假设您希望button位于底部，则可以绝对定位button：

div {
    ...
    position: relative;
}

...

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

JSFiddle demo

Answer 2

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*/
}

如何对齐底部的浮动元素

2 个答案: