CSS非包装浮动div

Question

我需要创建一个包含可变数量(浮动？)div的单行:容器尺寸是固定的,并且应该在需要时添加水平滚动条,从不包装.

我试过以下,但它不起作用:它换了.

div#sub {
    background-image:url("../gfx/CorniceSotto.png");
    width:760px;
    height:190px;
}
div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
}
div#sub > div#ranking > div.player {
    float:left;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

我尝试了一些东西(内联,表格等),但它们都失败了.

可以这样做吗？如果是这样,怎么样？

Answer 1

使用display: inline-block而不是float给容器white-space: nowrap.

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

这是一个例子:http://jsfiddle.net/D5hUu/3/

Answer 2

内联不起作用,table-cell应该工作 - 看到我在回答类似问题时所做的jsFiddle:

http://jsfiddle.net/DxZbV/1/

虽然不会在<= ie7中工作