Div заполнить пробел между 2 divs

Question

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

Answer 1

Вы можете использовать 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>

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

Answer 2

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

<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> 

Answer 3

Может быть 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; 
}