Question

我的问题有点难以解释。我想要一个div伸展，所以他所有漂浮的孩子都停留在同一条线上。问题是容器的父级具有固定宽度，并且隐藏了溢出。

这个想法是div.container拉伸（在我的例子中应该是1100px）所以div.thumb保持在同一条线上。

以下是JSFiddle上的示例：http://jsfiddle.net/TdHYg/3/

<div class ="viewport">
<div class="container">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
</div>

.viewport {
border:1px black solid;
overflow:hidden;
width:400px;   
}

.container {
/* width:1100px*/
}

.thumb{
background-color:lightgray;
margin:5px;
width:100px;   
height:100px;    
float:left;
}

Answer 1

在thumbs附近添加另一个容器：

http://jsfiddle.net/TdHYg/4/

Answer 2

您可以通过使用浮点数http://jsfiddle.net/TdHYg/5/围绕包含浮点数来保存Xander的div。这会让你“漂浮几乎所有东西”。但还有其他方法，如清算：http://jsfiddle.net/TdHYg/7/。

或者你想要http://jsfiddle.net/TdHYg/6/之类的东西吗？

Answer 3

http://jsfiddle.net/f2WeB/是否完全符合您的要求？希望如此！显示：从Safari 2开始，从Opera 9开始，从IE8开启和从Firefox 3开始支持内联块。

使用具有固定宽度和overflow：hidden的父级自动扩展子div

3 个答案: