Динамическая ширина div между двумя другими divs?

Question

У меня есть план, который должен быть:
Левого контейнер 200px
среднего контейнер динамического
правого контейнер 200px

Это означает, что контейнер Midde должен быть столько ширином, насколько это возможно, специальным образом, когда пользователь изменяет браузер.
Я знаю, что я описываю, это идеальная вещь для стола, слева и справа td до ширины = 200 и среднего тд без ширины, а середина отлично масштабируется до скретч-экрана.
Но с учетом причин я должен использовать контейнер Div здесь не таблицу.

Итак, как это сделать?

Answer 1

Вы можете использовать метод расч() к среднему контейнеру, как:

width: calc(100% - 400px); 

Пример here.

Answer 2

Дайте средний margin: 0 200px;

Левый: margin-right: -200px;

правая: margin-left: -200px;

И пусть они плавают. Обязательно установите ширину внешних на 200px.

Answer 3

Сначала вы определяете все divs как display: inline-block, а затем вы вставляете влево и вправо divs шириной 200 пикселей и позволяете им плавать. Затем установите ширину контейнера в нужную ширину.

<div class='container'> 
    <div class='right'> 
     col3 
    </div> 
    <div class='left'> 
     col1 
    </div> 
    <div class='middle'> 
     col2 
    </div> 
</div> 

Затем даю среднего один margin: 0 200px;

Левому: margin-right: -200px;

Право один: margin-left: -200px;

Answer 4

Вы можете использовать display: table повторить поведение таблицы с дивами, как так:

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="middle"></div> 
    <div class="right"></div> 
</div> 

.wrapper { 
    display: table; 
    width: 100%; 
} 
.wrapper div { 
    display: table-cell; 
} 
.left { 
    width: 200px; 
} 
.right { 
    width: 200px; 
} 

Demo @ CodePen