html - 流体（可堆叠）内容问题

Question

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

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

.half { float: left; width: 50%; } .quater { float: left; width: 25%; } .half img, .quater img { width: 100%; display: block; }

如果您在Firefox中加载示例并调整浏览器大小，您会发现它运行良好。然而，在Chrome中，div 会不成比例地增长，因此会产生很大的差距。

~ 删除display: block解决了这个问题，但是我遇到了图像填充问题。

Answer 1

好的，所以发生的情况是，与它的行伙伴和边缘进入底行区域相比，您示例中的大红色框有点太大了，然后将框推到右侧，然后使最后一个框换行到下一个（逻辑）行

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

希望有帮助。