寻找替代flex

Question

我正在使用flex将文本和div中的两个按钮对齐。这是我的代码

#wrapper {
    background-color: gray;
    display: flex;
    padding-left: 90px;
    padding-right: 90px;
}
#left {
    padding-top: 33px;
    padding-bottom: 33px;
    flex: 0 0 65%;
    height: 80px;
    line-height: 44px;
}
#right {
    padding-top: 45px;
    padding-bottom: 45px;
    flex: 1;
}
#button1 {
    height: 70px; 
    width: 70px; 
    margin-right: 20px;
}
#button2 {
    height: 70px; 
    width: 70px;
}

    
<div id="wrapper">
    <div id="left">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
    </div>
    <div id="right">
        <input type="button" value="More" id="button1">
        <input type="button" value="Ok" id="button2">
    </div>
</div>

此代码可在大多数浏览器上正常工作，但在其他一些浏览器中不支持flex。我还可以使用其他方法来获得相同的结果并创建横幅吗？

Answer 1

您可以对不支持flexbox的浏览器使用polyfill。例如：https://github.com/jonathantneal/flexibility

Modernizr在此处列出了几个选项：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#flexible-box-layout-spec

这样，您仍然可以使用flexbox并支持其他浏览器。

Answer 2

您可以使用CSS中的许多技术来获得相同的结果，我将向您展示一些示例：

Using Inline-block element     https://codepen.io/joaoskr/pen/OaEdJz

Using Float left     https://codepen.io/joaoskr/pen/JeZxXX

Using table alignment     https://codepen.io/joaoskr/pen/zMaewv

如您所见，无需使用flex，您就有很大的可能性获得相同的结果，选择您认为更好的方法，希望它可以对您有所帮助！

Answer 3

大多数现代浏览器版本都支持flex，但是您可能希望包括一些针对特定浏览器的规则以支持旧版。

-webkit-flex:（适用于Chrome 21.0 + / Safari 6.1 +

）

-ms-flex: for IE10

-moz-flex:（适用于Firefox 18.0+）