Способ разместить два элемента в одном div вот так

#html #css

#HTML #css

Вопрос:

Я хочу разместить два divs рядом, чтобы веб-страница была адаптивной. Я реализовал это, используя два divs, похожих на bootstraps col-md-6. но должен быть более простой способ, используя class = btn. приветствуется любое решение.

JSBin

HTML:

 <div class="cont">
    <div class="btn blue"></div>
</div>
<div class="cont">
    <div class="btn red"></div>
</div>

CSS:

 .cont{
     display:inline-block;
     width:50%;
     height:100px;
     background:#eee;
     padding:10px 5px;
     box-sizing:border-box;
}
.btn{
     width:100px;
     height:80px;
}
.red{
     background:red;
     float:left;
}
.blue{
     background:blue;
     float:right;
}

1. Какова ваша реальная цель? Ваш сайт адаптивный. Как вы хотите, чтобы это вело себя?

2. «Способ разместить два элемента в одном div вот так» — например, что?

3. @desperado я хочу, чтобы два div.btn были расположены по центру и рядом, поэтому пришлось использовать два divs.cont, но я хочу поместить оба div.btn в один div.cont, и они должны вести себя так же, как сейчас

4. для меня это выглядит как «приемлемое» решение. На практике вложенность div довольно распространена и часто необходима. Проверьте решение ниже.

Ответ №1:

Взгляните на display: flex , например, на http://css-tricks.com/snippets/css/a-guide-to-flexbox /

Я думаю, это именно то, что вы ищете.

1. Насколько хорошо поддерживается Flexbox?

2. Что ж. Кажется, только вчера мы все надеялись, что это будет принято. Поддержка IE (по-видимому, не менее 11) может оказаться невозможной, но рад, что она была принята.

3. В IE 10 используйте ms-flex … Да, flexbox очень хорош, очень полезен

Ответ №2:

Попробуйте это:

     .cont{
     margin: 0 auto; // added
     display:inline-block;
     width:50%;
     height:100px;
     background:#eee;
     padding:10px 5px;
     box-sizing:border-box;

}

Другой пример:

 <div class="wrapper" style="margin: 0 auto; width: 200px">
  <div class="inner1" style="width: 100px; float:left;"></div>
  <div class="inner2" style="width: 100px; margin-left: 100px"></div>
</div>

Ответ №3:

Так это то, что вы имеете в виду?

HTML

 <div class="cont">
    <div class="btn blue"></div>
    <div class="btn red"></div>
</div>

CSS

     .cont{
        margin: 0 auto; // added from desparado
        width:50%;
        height:100px;
        background:#eee;
        padding:10px 5px;
        box-sizing:border-box;
    }

    .btn{
        width:100px;
        height:80px;
    }

    .red{
        background:red;
        float:left;
    }

    .blue{
        background:blue;
        float:right;
    }

Вы можете заменить margin auto на inline-block и поиграть с этим, поместив в дополнительный контейнер.

Поскольку вы задаете определенную ширину своим кнопкам — задавая ширину вашему контейнеру и используя ширину поля, установленную на auto, я полагаю, вы получите то, что ищете.