在调整窗口大小时防止元素缠绕

Question

如何在调整窗口大小时防止我的方块缠绕？

我想要广场留在他们的位置，但每次我调整窗口的大小，他们被推下来，被隐藏。

这个例子目前正在工作，但是使这成为可能的解决方案是荒谬的。

有没有“更清洁”的方式，或者我怎样才能让它看起来更专业？

My JSFiddle Example

.content { 
    width: 100000000px; 
} 

Answer 1

从父元素删除position:absolute和overflow:hidden。

由于元素为inline-block，因此可以使用white-space:nowrap来防止它们缠绕。如果这不是预期的效果，只要将其删除即可。

jsFiddle example

#container { 
    width: 100%; 
    height: 100px; 
    white-space:nowrap; 
} 
.square { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
} 

Answer 2

http://jsfiddle.net/CLErY/2/

/* The following rule can be romoved, is just to give a smooth overflow hidden visibility */ 
.content { 
    width: 200%; /* Always bigger than the real value, so 200% is the double and it should work. */ 
} 

。内容应具有整体元件加一个孩子（100像素）的大小中的至少大小，因此200％是双和它应该管用。

如果我们有4个正方形，如果正方形的宽度为100，那么尺寸应该是（宽度x 4 +宽度），结果是500px。

此外，这是给一个更平滑的溢出消失，但不是必要的。

希望它有帮助。