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
你身上删除就会发现这个。它可能会帮助你。