Question

以下是页面：http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/

即使您调整浏览器大小，Chrome看起来也很棒，一切看起来都很棒。但是，在Firefox中，列彼此重叠，图像不会调整大小。

主要网格类是.c-1（较小宽度列）和.c-2（两个.c-1列的宽度）。我的代码中发生了什么问题导致了这个问题？

为了快速参考，我正在使用CSS3 box-sizing: border-box作为我的网格，这里是我的.c-1和.c-2类的代码：

.c-1 {
width: 288px;
float: left;
margin-left: 28px;
display: block;
}

.c-2 {
width: 604px;
float: left;
margin-left: 28px;
display: block;
}

.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; }

我还使用以下代码来处理响应式图像：

img { 
border: 0; 
-ms-interpolation-mode: bicubic; 
vertical-align: middle; 
max-width: 100%;
height: auto;
margin-bottom: 1.875em;
}

编辑好的我现在似乎已经修复了大多数部分的响应式图像。 .active的类名缺少宽度值，但我仍然遇到了Blog部分的疯狂问题。即使在该页面上使用了相同的布局（.c-1和.c-2内联在一起），这一部分似乎彼此重叠......奇怪！

Answer 1

好吧，当这些元素没有指定宽度时，Firefox似乎不喜欢计算元素的宽度，这就解释了为什么响应式图像不起作用。 设置为max-width的图像必须具有设置宽度的容器，否则图像将无法缩放。

我认为如果CSS中没有指定宽度，浏览器会将元素默认为100％宽度？

无论如何，现在都修好了。把宽度放在包装上的人！

为什么我的响应式布局坏了？

1 个答案: