Div заполняет пространство между двумя div

как я могу сделать так, чтобы все div располагались на одной строке и заполняли div # 2 пространство между левым плавающим div # 1 и правым плавающим div # 3? Вопрос


html between fill space
person user3519221    schedule 30.03.2015    source источник
comment
Пожалуйста, добавьте свой код html и css для этого простого примера   -  person Huangism    schedule 30.03.2015

Ответы (3)


arrow_upward
1
arrow_downward

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

html,
body {
  margin: 0;
  padding: 0;
}
.wrap {
  display: table;
  width: 100vw;
}
.one {
  display: table-cell;
  height: 50px;
  width: 20%;
  background: red;
}
.two {
  display: table-cell;
  height: 50%;
  width: 60%;
  background: cornflowerblue;
}
.three {
  display: table-cell;
  background: lime;
  height: 50px;
}
<div class="wrap">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

Обратите внимание, что я не установил ширину для последнего элемента, но он заполняет оставшееся доступное пространство?

person jbutler483    schedule 30.03.2015
comment
Спасибо, даже лучшее решение, пока таблицы поддерживаются всеми браузерами! - person user3519221; 31.03.2015
comment
Я также хочу упомянуть, что если вы установите ширину последнего элемента, а не второго элемента, этот css решит, что второй элемент также заполнит пространство между ними, пока не достигнет полной ширины элемента, отображаемого в виде таблицы. (сворачивать). Должен любить столы! Примечание. Кажется, что вам необходимо указать ширину первого элемента в непроцентиле, чтобы этот метод работал! - person Ethan Moore; 09.07.2020
comment
@EthanMoore это не <tables> - display отличается от «использования таблиц для макета» - person jbutler483; 09.07.2020
comment
@ jbutler483 Вы правы, но вы все еще используете табличную логику при использовании display: table. Также: невероятное время ответа на вопрос, на который был дан ответ 5 лет назад :P - person Ethan Moore; 09.07.2020
comment
@EthanMoore Правда, но тем не менее есть различия - person jbutler483; 09.07.2020

arrow_upward
4
arrow_downward

Возможно, вам поможет flex, вот JSFiddle.

HTML

<div class="parent">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

CSS

.parent {
    display: -webkit-flex;
    display: flex;
}
.div1 {
    width: 30px;
    height: 30px;
    background: #FFCC99;
}
.div3 {
    width: 30px;
    height: 30px;
    background: #FCF305;
}
.div2 {
    -webkit-flex: auto;
    flex: auto;
    height: 30px;
    background: #CCFFCC;
}
person Miaonster    schedule 30.03.2015
comment
Спасибо, это то, что я искал! - person user3519221; 30.03.2015
comment
@ user3519221: Просто будьте осторожны с flexbox, так как некоторые считают, что он еще не готов к работе из-за совместимости с браузерами среди нескольких других причин... - person jbutler483; 30.03.2015

arrow_upward
0
arrow_downward

Вот фиктивная реализация:

<div id="l"></div>

<div id="r"></div>

<div id="c"></div>

<style>
#l {
float: left;
width:30%;
}
#r { 
float: right;
width: 30%;
}
#c {
margin: 0 auto;
width: 40%;
}
</style>
person mehulmpt    schedule 30.03.2015
comment
Но что, если первый и последний div должны иметь ширину, указанную в пикселях, а не в процентах? - person user3519221; 30.03.2015
comment
@user3519221 user3519221 Если ширина контейнера установлена ​​вами (например, 1024 пикселей или 960 пикселей), вы можете рассчитать ее аналогичным образом (30% ширины контейнера на 2 элемента div и 40% ширины контейнера на 1 центральный элемент div). Если нет, вы можете использовать javascript для расчета полной ширины экрана и применить ту же логику, что и выше. - person mehulmpt; 30.03.2015