在DIV中显示隐藏DIV的一部分

Question

我今天遗漏了一些显而易见的事情，伙计们 - 请一定帮助。

我在另一个DIV中有一排水平的DIV。我希望第三个DIV显示为顶部DIV部分隐藏。但它根本没有显示出来。

这是CSS：

.outer {
    background: #800;
    height: 90px;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
}
.label {
    float: left;
    display: block;
    background: #888;
    width: 75px;
    height: 50px;
    margin: 10px;
    padding: 10px;
    line-height: 50px;
    font-size: 45px;
    text-align: center;
}

这是HTML：

<div class="outer">
    <div class="label">1</div>
    <div class="label">2</div>
    <div class="label">3</div>
    <div class="label">4</div>
</div>

感谢您的帮助！

Answer 1

  

我今天遗漏了一些明显的东西，伙计们 - 会感激一些帮助   请。

你所缺少的“显而易见”的东西是第三和第四内div正在下面，因为没有足够的水平空间。例如，如果我使用Chrome的开发人员工具进行检查：

解决此问题的最简单方法是从float: left切换到display: inline-block，并在包含元素上使用white-space: nowrap（您已经拥有它！）：

http://jsfiddle.net/rGfNY/

Answer 2

你需要将它们包装在一个新的div中，给div一个宽度，（大于你的外部div）它将被外部div的溢出所隐藏。

注意事项：内部div的宽度不是根据内容调整的，要么你专门设置得非常高，要么你必须计算它的内容要么只是把它硬编码在css中，要么使用javascript。

HTML：

<div class="outer">
    <div class="inner">
        <div class="label">1</div>
        <div class="label">2</div>
        <div class="label">3</div>
        <div class="label">4</div>
    </div>
</div>

的CSS：

.outer {
    background: #800;
    height: 90px;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
}
.inner {
    width: 460px;
}
.label {
    float: left;
    display: block;
    background: #888;
    width: 75px;
    height: 50px;
    margin: 10px;
    padding: 10px;
    line-height: 50px;
    font-size: 45px;
    text-align: center;
}

工作示例： http://jsfiddle.net/f2wpm/