我正在为一个网站编写一个响应式设计，我有 4 个独立的 div，它们应该按 2 TOP x 2 BOTTOM 排列。在某些分辨率下它似乎工作正常，但在其他分辨率下左上 div 和左下 div 之间有一个洞。 它应该是这样的: http://postimg.org/image/76q5y5w5v/
这是渲染不当时的样子: http://postimg.org/image/6a4f8x4j7/
如果您想查看应用的所有 CSS，只需访问 http://bbogdanov.us/ (页面底部)并尝试使用浏览器的大小来监控 div 在不同大小下的行为。
最佳答案
发生这种情况的原因是 div 元素被 float 了。当您降低屏幕尺寸时， block 会变长(变高)并且 float 会中断。您可以通过添加此代码段来清除每隔一行:
.uslugihome2:nth-child(odd) {
clear: left;
}
但是请注意，您需要使用 polyfill 才能在旧版浏览器上运行，因为不支持某些伪类，如 nth-child。我推荐Selectivizr .
关于html - 对齐响应式 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23619145/