調整窗口大小時防止元素包裝

Question

在調整窗口大小時，如何防止正方形包裹？

我希望方塊保持在他們的位置，但每次我調整窗口大小時，它們都被推下並隱藏起來。

這個例子目前正在運行，但是使這成為可能的解決方案是荒謬的。

是否有“更清潔”的方式或如何讓它看起來更專業？

我的JSFiddle示例

.content {
    width: 100000000px;
}

Answer 1

刪除position:absolute和overflow:hidden從父元素overflow:hidden 。

由於元素是inline-block ，因此可以使用white-space:nowrap來防止它們被包裝。 如果這不是預期的效果，請刪除它。

jsFiddle例子

#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. */
}

.content應該至少具有整個元素的大小加上一個孩子的大小（100px），所以200％是雙倍的，它應該工作。

如果我們有4個正方形，則尺寸應為（寬度x 4 +寬度），如果正方形的寬度為100，則結果為500px。

這也是為了給出更平滑的溢出消除但不是必要的。

希望能幫助到你。