html - 寻找 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

你可以在 css 中使用很多技术来达到相同的结果，我将向你展示一些例子:

使用行内 block 元素 https://codepen.io/joaoskr/pen/OaEdJz

使用向左浮动 https://codepen.io/joaoskr/pen/JeZxXX

使用表格对齐 https://codepen.io/joaoskr/pen/zMaewv

正如你所看到的，你有很多可能在不使用 flex 的情况下达到相同的结果，选择你认为更好的，希望它能帮助你!!