在調整窗口大小時防止元素纏繞

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。

此外，這是給一個更平滑的溢出消失，但不是必要的。

希望它有幫助。