2 divs заполнить горизонтальное пространство

Question

У меня есть 2 div в родительской обертке. Я хотел бы сделать следующее:

1. эти две дивы доля 100% пространства в ширину, так что нет никакого зазора между ними, все красного цвета.

2. Когда вы масштабируете оболочку вниз, div b попадает в новую строку ниже div a (это ведет себя так, как должно), но в этом случае я хочу, чтобы оба divs были на 100% ширины, поэтому они делают 2 строки красного цвета цвет.

Возможно ли это сделать только с помощью css (без таблиц!) И без дополнительных элементов?

Выполнение цвета фона обертки красного цвета для компенсации этого не является решением.

<div class="wrapper"> 
    <div class="a">left</div> 
    <div class="b">right</div> 
</div> 

http://jsfiddle.net/EAkLb/75/

Answer 1

Просто измените CSS, чтобы width:50%; для обоих a и b, добавьте медиа-запрос, чтобы установить их на 100% при меньших видовых экранах.

.wrapper{ 
 
    position: relative; 
 
    max-width: 400px; 
 
    height:30px; 
 
    background-color: #fff; 
 

 

 
} 
 
.a{ 
 
    float: left; 
 
    background-color: red; 
 
    text-align: left; 
 
    width:50%; 
 
    height:30px; 
 
} 
 
.b{ 
 
    float: right; 
 
    background-color: red; 
 
    text-align: right; 
 
    width:50%; 
 
    height:30px; 
 

 
} 
 

 
@media screen and (max-width: 500px) { 
 
    .a, .b { 
 
    width: 100%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="a">left</div> 
 
    <div class="b">right</div> 
 
</div>

Answer 2

Flexbox можно сделать:

JsFiddle demo

.wrapper { 
 
    position: relative; 
 
    max-width: 400px; 
 
    height: 30px; 
 
    background-color: #fff; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.a { 
 
    background-color: red; 
 
    text-align: left; 
 
    flex: 0 0 110px; 
 
    height: 30px; 
 
} 
 
.b { 
 
    background-color: red; 
 
    text-align: right; 
 
    flex: 0 0 120px; 
 
    height: 30px; 
 
} 
 
@media screen and (max-width: 400px) { 
 
    .a, 
 
    .b { 
 
    flex: 1 0 100%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="a">left</div> 
 
    <div class="b">right</div> 
 
</div>

Answer 3

Рассмотрим вы используете запросы CSS медиа, вы можете просто изменить ширину и CSS поплавок свойство вашего дивы. Это не современный способ, но это работа.

.wrapper{ 
    position: relative; 
    max-width: 400px; 
    height:30px; 
    background-color: #fff; 
} 

.a, .b { 
    float: left; 
    width: 50%; 
} 

.a{ 
    background-color: red; 
    text-align: left; 
    height:30px; 
} 

.b{ 
    background-color: red; 
    text-align: right; 
    height:30px; 
} 

@media screen and (max-width: 400px) { 
    .a, .b { 
    float: none; 
    width: 100%; 
    } 
} 

Answer 4

Красота flex что mediaqueries часто можно избежать.

Используя комбинацию flex с min-width и flex-wrap, мы можем добиться желаемого эффекта без запроса на медиа.

.wrapper{ 
 
    position: relative; 
 
    max-width: 400px; 
 
    height:30px; 
 
    background-color: #fff; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child { 
 
    flex-grow: 1; 
 
    background-color: red; 
 
    height:30px; 
 
} 
 

 
.a{ 
 
    min-width:110px; 
 
    text-align: left; 
 
} 
 

 
.b{ 
 
    min-width:120px; 
 
    text-align: right; 
 
}

<div class="wrapper"> 
 
    <div class="child a">left</div> 
 
    <div class="child b">right</div> 
 
</div>

Вот JSFiddle.

Answer 5

Мое решение также использует Flex - но я использую min-width attr. сказать гибкий контейнер, когда для переключения на 2 линии

.wrapper{ 
    position: relative; 
      max-width: 100%; 
    height:30px; 
    background-color: #fff; 
      display: flex; 
      flex-wrap:wrap ; 
} 
.a,.b { 
    background-color: red; 
      width:50%; 
      min-width:130px; 
    height:30px; 
      flex-grow:1; 
      flex-shrink:0; 
      flex-basis:50% 
} 

.b { 
    background-color:green; 
    text-align:right; 
} 

fiddle

использовать ползунок, чтобы сделать окно меньше я использовал зеленый, как назад для элемента «B»