css - css 3 divポジショニング、2つは左右にフロート付き

Question

私のHTMLコードは

<div style="border:1px solid red; height:140px;">
    <div style="width:100px; float:left; border:1px solid blue;">
        left
    </div>
    <div style="width:100px;  float:right; border:1px solid blue; ">
        right
    </div>
    <div style="border:5px solid green;">
        middle
    </div>
</div>

緑の境界線が幅の100％に広がり、左右のdivをカバーするのはなぜですか？「middle」という単語で始まり「right」という単語の直前で終わる唯一のブロックをカバーするように修正するにはどうすればよいですか？試しただけposition:relative;ですが、役に立ちませんでした。

コードの例はここにあります： jsFiddle

score 3 · Accepted Answer

オーバーフローを書き込みます：それに隠されています。

<div style="border:5px solid green;overflow: hidden;">
            middle
</div>

これをチェックしてくださいhttp://jsfiddle.net/A6qWE/1/

score 1 · Accepted Answer

1

overflow:hidden単語middleを含むdivのスタイルに追加します

于 2012-09-10T08:58:05.647 に答える

score 1 · Accepted Answer

1

追加overflow:auto

http://jsfiddle.net/A6qWE/7/このデモを確認してください

于 2012-09-10T09:00:13.953 に答える

score 0 · Accepted Answer

0

中央のdivにマージンを追加しますmargin: 0 100px

コードの例を参照@jsFiddle

于 2012-09-10T09:01:12.940 に答える

css - css 3 divポジショニング、2つは左右にフロート付き

4 に答える 4

Related

Reference