html - 流体(可堆叠)内容问题

Question

我正在构建一个由 50% 宽度的 div 和 25% 宽度的 div 组成的流动网站，我遇到的问题是对齐问题，尤其是与 Chrome。

我已经在这里上传了代码:http://tekulated.com/test100/

.half { float :左；宽度:50%； }
.quater { float :左；宽度:25%； }
.half img, .quater img { 宽度: 100%;显示: block ； }

如果您在 Firefox 中加载该示例并调整浏览器的大小，您将看到它完美运行。然而，在 Chrome 中，div 不成比例地增长，结果造成了很大的差距。

~ 删除 display: block 可以解决问题，但我会遇到图像填充问题。

Answer 1

好吧，你的示例中的红色大框与其同排的框相比有点太大了，并且边缘进入了底行区域，然后将框向右推，然后使最后一个框换行到下一个(逻辑)行

我认为确保大红色图像的高度与较小的行高成比例会有所帮助。这只是一个图像大小调整问题。

希望对您有所帮助。