Ищете альтернативу сгибанию

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, я покажу вам несколько примеров:

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 2

Большинство современных версий браузеров поддерживают flex, однако вы можете включить некоторые специфичные для браузера правила для поддержки предыдущих версий.

-webkit-flex: для Chrome 21.0 + / Safari 6.1 +

-ms-flex:для IE10

-moz-flex: для Firefox 18.0+

Answer 3

Вы можете использовать polyfill для браузеров, которые не поддерживают flexbox.Например: https://github.com/jonathantneal/flexibility

У Modernizr есть несколько параметров, перечисленных здесь: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#flexible-box-layout-spec

Таким образом, вы все еще можете использовать flexbox и также поддерживать другие браузеры.