Вопрос по html, css, flexbox – Flexbox

0

ользую 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 не поддерживается. Есть ли другой метод, который я могу использовать для достижения того же результата и создания баннера?

использовать элементы inline-block Temani Afif

Ваш Ответ

3   ответа
0

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

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

-ms-flex: для IE10

-moz-flex: для Firefox 18.0+

Flexbox Zohir Salak
0

используя множество методов в 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, выберите то, что вы думаете лучше, надеюсь, это поможет вам !!

@pungis Добавитьfloat: left; к элементам #left и #right, затем добавьте эту строку #wrapper: after {content: ""; дисплей: стол; ясно: оба; } João Deroldo
Спасибо. Я пытался использовать элемент Inline-block. Проблема в том, что верхний и нижний отступы больше не работают на кнопках, у вас есть представление о проблеме? это кодcodepen.io/kev34/pen/GwGeya pungis
0

которые не поддерживают flexbox. Например:https://github.com/jonathantneal/flexibility

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

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

Похожие вопросы