对齐浮动元素的首选方法是什么
<div>
<button>goto</button>
<h1>TITLE</h1>
</div>
与以下CSS：
button {
float: right;
}
为什么我不能使用类似的东西vertical-align: bottom？我见过定义巨大的解决方案，line-height但在我看来，这就像一个hack。有css3解决方案吗？
弹性框模块有一个CSS3选项，简称弹性框。不过，这是一个候选建议，因此它仍然具有浏览器支持的复杂性。
Internet Explorer最早的支持是IE10，但它支持规范的旧版本，语法与当前版本的语法不同，并且需要-ms-前缀。IE10移动版也是如此，它支持2012年制定的规范的临时版本中的语法。但是，IE11支持未加前缀的最新规范。Android也仅支持版本4.4之前带有-webkit-前缀的规范的旧版本。Safari和iOS Safari都仍需要-webkit-前缀，但自台式机上的6.1版和iOS上的7.1版开始支持较新的规范属性。Chrome和Firefox是常绿的浏览器，可以安全地使用当前未加前缀的规范语法。而且，如果您关心BlackBerry，
尽管如此，如果仅设计用于现代浏览器的奢侈品，那么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*/
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句