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

页面如下：

它在Chrome中看起来很棒，即使你调整浏览器的大小，一切看起来都很棒。然而，在Firefox中，列彼此重叠，图像不会调整大小

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

为了便于参考，我在网格中使用CSS3

box size: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的类名缺少宽度值，但我的博客部分仍然有一个疯狂的问题。尽管该页面使用了相同的布局（.c-1和.c-2并排），但该部分似乎彼此重叠…奇怪

好吧，当元素没有指定宽度时，Firefox似乎不喜欢计算元素的宽度，这就解释了为什么响应图像不能工作。设置为“最大宽度”的图像必须具有设置宽度的容器，否则图像将无法缩放

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

---

不管怎样，现在都修好了。给你的包装纸加宽，伙计们

嗨，请阅读谢谢！我已经添加了关键的代码位@Pekka