Расширение ширины плавающего div

Question

Учитывая два плавающих divs, ширина которых составляет 50% их контейнера при выравнивании бок о бок, возможно ли, чтобы их ширина до 100% увеличивалась, когда экран уменьшался до точки, где второй div должен быть сдвинут на один ряд вниз?

Возьмите, например, codepen и сжимайте окно горизонтально, пока зеленый div и его контейнер не перейдут под красный. Возможно ли, чтобы ширина #wrap1 и #wrap2 простиралась вплоть до #container, так что #one и #two центрированы относительно #container? то есть он будет выглядеть как this.

Answer 1

flexbox решение..не требуется медиа-запрос как таковой.

#container { 
 
    background: rgba(0, 0, 0, .1); 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
[class^="wrap"] { 
 
    flex-grow: 1; 
 
    flex-shrink: none; 
 
} 
 
.wrap1 { 
 
    background: rgba(100, 10, 10, .2); 
 
} 
 
.wrap2 { 
 
    background: rgba(10, 100, 10, .2); 
 
height: 100px; 
 
} 
 
#one { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: rgba(100, 100, 0, .1); 
 
    margin: 0 auto; 
 
} 
 
#two { 
 
    width: 300px; 
 
    height: 100px; 
 
    background: rgba(100, 100, 0, .1); 
 
    margin: 0 auto 
 
}

<div id="container"> 
 

 
    <div class="wrap1"> 
 
    <div id="one"> 
 
    </div> 
 
    </div> 
 

 
    <div class="wrap2"> 
 
    <div id="two"> 
 

 
    </div> 
 
    </div> 
 

 
</div>

Codepen Demo

Answer 2

Вы должны использовать flexbox. Here is your Pen edited

CSS:

#container{ 
    background: rgba(0,0,0,.1); 
    width:100%; 
    height:auto; 
    position: relative; 
    overflow: hidden; 
    display: flex; 
} 

@media screen and (max-width: 800px) { 
    #container{ 
    flex-direction: column; 
    } 
} 

.wrap1{ 
    background: rgba(100,10,10,.2); 
    flex-grow: 1; 
} 
.wrap2{ 
    background: rgba(10,100,10,.2); 
    height: 100px; 
    flex-grow: 1; 
} 

Answer 3

Вы можете сделать это с помощью Bootstrap CSS. Вы хотите создать контейнер для жидкости, а затем создать два внутренних div. Внутренние divs будут иметь класс col-md-6, который будет 50% для больших экранов и col-xs-12 для маленьких экранов. Это автоматически изменится с помощью браузера.

<div class="container-fluid"> 
    <div class="col-md-6 col-xs-12">Div 1</div> 
    <div class="col-md-6 col-xs-12">Div 2</div> 
</div> 

Answer 4

Если вы не работаете с динамической шириной, вы можете добавить медиа-запрос, чтобы изменить поведение контейнера в позиции обертки.

В противном случае вам нужно обратиться к flexbox bevhaviour - this guide by Dimitar Stojanov имеет несколько примеров обертывания.

[Изменить:] фиксированная ссылка.