css - 让孩子自动展开一个水平滚动的 div

Question

我在这里有我想要的，但是我必须手动输入宽度。我想要一个父容器来保存包含子 div 的可拉伸 div。父容器是固定大小的。我需要可拉伸的 div 足够大以水平包含子 div。将可拉伸 div 设置为自动宽度不起作用，我不想手动设置大小。除了手动设置大小还有其他选择吗？

#parent{
    width:50%;
    height:200px;
    background:red;
    overflow-x: scroll;
    overflow-y: hidden;
}

#stretchable-div{
    background:darkblue;
    /* width: 600px; works but don't want to manually size*/
    width: auto;
}

.child {
   background:blue;
   width: 100px;
   height: 150px;
   float:left;
}

Answer 1

如果你需要使可伸缩的 div 自动宽度，它必须由它的孩子决定。这与孩子的浮动属性冲突（浮动行为由它的父宽度决定）。所以你必须改变父母的宽度或孩子的浮动。

我可以使用display: inline-block和nowrap属性将孩子放在一行中。但是你必须在 IE7 下破解 inline-block。例子在这里。

目前找不到一个很好的解决方案。只是给它一个提示。