overflow-y：auto | scroll导致水平移位

Question

我遇到类似于Adding overflow-y to block element causes width to decrease.的问题，但我希望我的右侧div水平居中。所以我有“保证金：自动;”在正确的div。

这个工作正常，直到我将“overflow-y：auto”（或滚动）添加到右侧div。在此之前，边距是从整个页面宽度测量的。添加后，它会从左侧div的右边缘开始测量，因此它不是以页面为中心，而是以页面的其余部分为中心。

问题的简单演示：

http://dev.bridgebase.com/barmar_test/demo-overflow.php

Answer 1

在overflow上添加div属性时，您可以定义新的格式化上下文。如MDN documentation on this subject中所述，float影响仅限于特定格式上下文。格式化上下文由上述文档中列出的特定规则定义。

position: absolute是一个解决方案，但您必须明白绝对定位的元素相对于其最后定位的祖先（即具有position属性且值不同于static的元素定位（默认的一个））。同时look at MDN完全掌握这个概念。

你可以阅读那些深刻解释浮动元素的this article on SitePoint。您应该更专门地对浮动与多列布局的绝对定位部分感兴趣。

Answer 2

你可以添加位置：绝对;使用第二个例子来获得相同的效果。