显示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 s的下方下降，因为没有足够的水平空间。举例来说，如果我检查一下使用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/