Question

如何在调整窗口大小时阻止方块包裹？

我希望方块保持在他们的位置，但每次我调整窗口大小时，它们都会被推下并被隐藏。

这个例子目前正在运作，但实现这一目标的解决方案实在太荒谬了。

是否有“更清洁”的方式或如何让它看起来更专业？

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

.content应至少具有整个元素的大小加上一个子元素的大小（100px），因此200％是双重的，它应该有效。

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

这也是为了给出更平滑的溢出消除但不是必要的。

希望它有所帮助。

调整窗口大小时防止元素包装

2 个答案: