Question

我有一个div漂浮在左边，一个div漂浮在右边，在2之间有一个可变间隙（响应）。

我需要能够用颜色填充中间的间隙，但只能填充中间的间隙（它不能在其他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;
}

Example

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

Example

Answer 4

考虑使用CSS flexbox

的flex-grow

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

Fiddle

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>

在两个左/右对齐的div之间浮动div

5 个答案: