將div浮動在2個左/右對齊的div之間

Question

我有一個div左浮動，一個div右浮動，兩個之間有一個可變的間隙（響應）。

我需要能夠用一種顏色填充中間的空白，但只能填充中間的空白（它不能在其他2個div后面流動，因為這些div具有透明的背景）

我如何用html結構來實現這一點：

HTML

<div class="nav-wrap">
    <ul class="nav">
    </ul>
    <div class="filler"></div>
    <ul class="nav right">
    </ul>
</div>

CSS

.nav-wrap{
    float:left;
    width:100%;
}

.nav{
    float:left;
    height:50px;
    width:200px;
    margin:0;
    padding:0;
}

.nav.right{
    float:right;
}

.filler{
    ?????
}

Answer 1

您可以使用此目的的表格布局。

.nav-wrap{
    width:100%;
    display:table;
    table-layout:fixed;
}

.nav{
    display:table-cell;
    height:50px;
    width:200px;
    margin:0;
    padding:0;
}


.filler{
     display:table-cell;
     background: ?;
     height:50px;
}

例

Answer 2

對於填充物，給它一個等於導航寬度的邊距：

.filler{
    margin: 0 200px;
    background-color: blue;
}

為此，請將兩個導航都放在HTML中的div之前：

<div class="nav-wrap">
    <ul class="nav">
    </ul>
    <ul class="nav right">
    </ul>
    <div class="filler">X</div>
</div>

小提琴： http : //jsfiddle.net/yyZz6/1/

Answer 3

您可以使用以下html：

<div class="nav-wrap">
    <ul class="nav left">
    </ul>
    <div class="filler"></div>
    <ul class="nav right">
    </ul>
</div>

具有以下樣式：

.nav-wrap{
    padding:0 200px;
    overflow:auto;
}

.nav{
    height:50px;
    width:200px;
    margin:0;
    padding:0;
}

.nav.right{
    float:right;
    margin-right:-200px;
}

.nav.left{
    float:left;
    margin-left:-200px;
}

.filler{
    width:100%; float:left;
}

例

Answer 4

考慮使用CSS flexbox的 flex-grow

.filler{
    background: SaddleBrown; flex-grow: 1;
}

小提琴

Answer 5

如果您試圖實現響應式設計，則不應使用固定寬度。 相反，我建議您嘗試一下：

   <div class="nav-wrap">
    <ul class="nav">

    </ul>
    <div class="filler">

    </div>
    <ul class="nav">

    </ul>
</div>
<style type="text/css">
.nav-wrap{
    float:left;
    width:100%;
}

.nav, .filler{
    border: 1px solid black;
}
.nav{
    float:left;
    height:50px;
    width:13%;
    margin:0;
    padding:0;
}


.filler{
    float: left;
    width: 64%;
}
<style>