html - P が相対の子の場合、絶対親 P をその子の幅に引き伸ばす

Question

ここを見てください： http://jsfiddle.net/QTrat/10/

赤いボックスを、浮いた子を合わせた幅に伸ばしたいです。

つまり、次のようにする必要があります。

child child child

それ以外の

child
child
child

どうすればいいのですか？

レイアウトが同じである限り、コードを完全に変更してもかまいません。

Answer 1

フローティングから に変更しdisplay: inline-block、親に次のように指定しwhite-space: nowrapます。

.middle-parent{
    background-color: red;
    position: absolute;

    white-space: nowrap;                /* This */

    left: 0;            
}

.floated-child{
    display:inline-block;                     /* And this */

    background-color: beige;
    margin: 0 5px;
}

更新されたフィドル: http://jsfiddle.net/sveinatle/QTrat/12/

Answer 2

position:absolute;あなたから取り除くだけでこれ.middle-parent
が見つかります。それはあなたを助けるかもしれません。