css - 2 个 div 之间的 div 宽度 100%

Question

在我的页面上，我有这样的 div 结构。

- 身体上有 2 个 div。第一个 20% 宽度，第二个 80% 宽度。- 在第一个 div 旁边有 3 个 div。第一个向左浮动：11px 宽度，第三个向右浮动：22px 宽度。我想将第 2 个 div 放在第 1 个和第 3 个 div 之间，覆盖 100% 的剩余宽度。

我不能像这样制作第二个 div。我该怎么做？

Answer 1

像这样写：

HTML

<div class="firstdiv">
    <div class="first">1</div>
    <div class="third">3</div>
    <div class="second">2</div>
</div>
<div class="secdiv">80%</div>

CSS

.firstdiv{
    width:20%;
    float:left;
    background:red;
    }
    .secdiv{
     overflow:hidden;
     background:green;
    }

.first{
    float:left;
    width:11px;
    background:yellow;
}
.third{
    float:right;
    width:22px;
    background:pink;
}
.second{
    overflow:hidden;
    background:blue;
}

检查这个小提琴