0

我的响应式 CSS 有一个非常奇怪的问题。身体宽90%。

如果水平分辨率低于 1200 像素,我将其更改为 100%(使用媒体查询),但在低于 1000 像素的分辨率下,它应该再次为 100%。

我的页面有两个居中的容器,左侧的另一个在右侧的下方(在 z-index 后面),它有一个背景图像。两个容器都具有流体宽度。

所以基本上当屏幕宽度低于某个点时,带有图像的左侧容器几乎不会低于右侧容器。右边的容器有 20px 的边距以留出一些空间。这个 20px 的边距应该是透明的。

这工作正常,但如果我在 1000 像素和 1200 像素之间缩放浏览器,右侧内容容器的边距变得不透明,但它不应该。它应该是透明的,因为它的宽度更宽。

我不知道这种行为来自哪里,因为我没有在边缘进行任何更改。

只需将浏览器缩放到 1000 像素到 1200 像素之间的宽度,然后您就会看到图像和内容之间的绿色间隙。(如果您将 tahn 1200px 放大一点,您会看到边距再次透明)

抱歉有点难以解释

4

1 回答 1

2

它不会变得不透明。

问题不在于右侧 div 与左侧重叠。问题在于左 div 的宽度。

它是 40%,一旦您的浏览器变得太窄,它就会开始变得小于图像。

如果您将 a 添加min-width:780px到左侧 div 它将起作用。并且由于它是固定的并且具有较低的 z-index,因此您无需担心它的大小..

于 2013-09-17T11:12:17.243 回答