CSS非包装浮动div [英] CSS non-wrapping floating divs

问题描述

我需要创建一个包含可变量（浮动？）divs的单行：容器维度是固定的，并且在需要时，应该添加一个水平滚动条，从不包装。

I need to create a single line containing a variable amount of (floating?) divs: the container dimension is fixed, and it is supposed to add an horizontal scrollbar when needed, never wrapping.

我试过下面的，但它不工作：它换行。

I tried the following, but it doesn't work: it wraps instead.

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;
}

我已经尝试了一些东西（inline，table-cell等） ），但都失败了。

I've tried a few things (inline,table-cell,etc.) but they all failed.

这样做可以吗？如果是，

Can this be done? If so, how?

推荐答案

使用 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/

这篇关于CSS非包装浮动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！