CSS 非环绕浮动 div答案

【问题标题】：CSS non-wrapping floating divsCSS 非环绕浮动 div
【发布时间】：2012-01-16 20:48:48
【问题描述】：

我需要创建一个包含可变数量（浮动？）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;
}

我尝试了一些方法（内联、表格单元格等），但都失败了。

这可以吗？如果有，怎么做？

【问题讨论】：

你能用你的例子在 jsfiddle.net 上设置一个小提琴吗？
@Mathletics：就在这里！ jsfiddle.net/HZzrk
嗨。 '>' 在 CSS 中是什么意思？
@bodacydo（以后会来的人）Direct Child Selector - code.tutsplus.com/tutorials/…

标签： html css css-float

【解决方案1】：

哎呀，我误读了这个问题。上一个答案已删除。

在您的容器上，white-space: nowrap，然后在元素上display: inline-block

在这里提琴：http://jsfiddle.net/HZzrk/1/

【讨论】：

不，scroll 表示“滚动条始终存在”，而 auto 表示“仅在需要时滚动条”

【解决方案2】：

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

【讨论】：

如果没有像我的回答那样将width 更改为min-width，那么如果你得到太多元素，你仍然会得到一个“包装”的元素。看看你的一些额外元素：jsfiddle.net/D5hUu/2
酷！我尝试了inline-block 和nowrap，但没有一起尝试！
其实这也是我的回答中的一个问题。 min-width 并没有完全解决它。
@John Kurlak：将vertical-align: bottom; 添加到div#sub > div#ranking > div.player
将display 设置为inline-block 时要小心。如果中间有空格，则会导致项目之间出现不必要的空格。

【解决方案3】：

内联不起作用，表格单元格应该起作用 - 请参阅我在回答类似问题时所做的这个 jsFiddle：

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

虽然在

【讨论】：

【解决方案4】：

已编辑：结合 DanielB 和我的原始答案。对于sub 和ranking，您需要使用min-width 而不是width，并将元素设置为inline-block，容器具有white-space: nowrap。见：http://jsfiddle.net/5wRXw/3/

编辑 2：出于您的目的，最好在 ranking 元素上同时消除 overflow 属性。见http://jsfiddle.net/5wRXw/4/

#sub {
    backgrond-color: yellow;
    min-width:760px;
    height:190px;
}
#ranking {
    position:relative;
    top:42px;
    left:7px;
    min-width:722px;
    height:125px;
    overflow-x:auto; /* you may be able to eliminate this see fiddle above */
    overflow-y:hidden; /* and eliminate this */
    white-space: nowrap; /* like DanielB */
}
#ranking > .player {
    display: inline-block; /* like DanielB */
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

【讨论】：

来自 OP the container dimension is fixed 的 Mhm 引用：所以 min-width 不是解决方案。