css - 2 div 間の div 幅 100%

Question

私のページには、このような div 構造があります。

-ボディには 2 つの div があります。最初の 20% 幅、2 番目の 80% 幅。-最初の div には、3 つの div が並んでいます。最初の左フロート: 11px 幅、3 番目のフロート右: 22px 幅。1 番目と 3 番目の div の間に 2 番目の div を配置して、残りの幅の 100% をカバーします。

このように2番目の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;
}

このフィドルをチェックしてください