让孩子自动展开水平滚动div

mic*_*ahl 1 html css

我有我想要的东西,但是我必须手动输入宽度.我希望有一个父容器,它将容纳包含子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;
}
Run Code Online (Sandbox Code Playgroud)

Chr*_* Li 5

如果你需要制作可伸缩的div自动宽度,它必须由它的孩子决定.这与儿童的浮动属性相冲突(浮动行为取决于它的父宽度).所以你必须改变父母的宽度或儿童的浮动.

我可以使用display:inline-blocknowrap属性来将chidlren放在一行中.但你必须在IE7下攻击内联块.这个例子在这里.

暂时找不到一个非常好的解决方案.只是给它一个提示.