寻找 flex 的替代品答案

【问题标题】：Looking for an alternative to flex寻找 flex 的替代品
【发布时间】：2018-11-26 20:20:35
【问题描述】：

我正在使用 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。有没有其他方法可以达到相同的效果并创建横幅？

【问题讨论】：

使用内嵌块元素

标签： html css flexbox

【解决方案1】：

您可以使用 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 有很多可能达到相同的结果，选择您认为更好的，希望它可以帮助您！！

【讨论】：

谢谢。我尝试使用 Inline-block 元素。问题是顶部和底部填充不再适用于按钮，你知道这个问题吗？这是代码codepen.io/kev34/pen/GwGeya
@pungis 将float: left; 添加到#left 和#right 元素，然后添加这一行#wrapper:after { content: "";显示：表格；明确：两者； }

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

-ms-flex: 用于 IE10

-moz-flex: 用于 Firefox 18.0+

【讨论】：