寻找弹性的替代品 [英] Looking for an alternative to flex

查看:66
本文介绍了寻找弹性的替代品的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am using flex to align a text and two buttons inside a div. This is my code

#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.我还可以使用其他方法来获得相同的结果并创建横幅吗?

This code is working properly on most browser but in some others flex is not supported. Is there any other method that can I use to achieve the same result and create the banner?

推荐答案

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

Most modern browser versions support flex, however you may want to include some browser specific rules for legacy support.

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

-webkit-flex: for Chrome 21.0+/Safari 6.1+

-ms-flex:

-moz-flex:用于Firefox 18.0+

-moz-flex: for Firefox 18.0+

这篇关于寻找弹性的替代品的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆