响应式设计 - 调整浏览器大小时 DIV 的问题

Question

我正在将我目前固定宽度的网站变成一个响应式网站，可以在以下位置查看：http://www.byfrequency.co.uk/demo

我已经创建了 CSS 框架并应用了相关的媒体查询（在 Gridpak 的帮助下），所以那里没有问题。我遇到的问题是，当我调整浏览器的大小时，我的 div 会改变位置并最终产生闪烁效果。这似乎只发生在我设置的 768px 和 1080px 宽度之间。

我不知道为什么会发生这种情况以及如何解决问题，因此无法复制和粘贴相关的代码位。非常感谢一些帮助和指导！

Answer 1

闪烁来自以特定宽度从左侧跳到右侧的少数元素。由于浏览器环绕事物的方式，行的两半在跳跃元素不具有相同的高度。当上一行的右侧变短 1 个像素时，跳跃元素向上移动到该空间中。它的float: left; 属性适合它在左侧“高 1 像素”大块的右侧。

为防止跳跃，请尝试在有问题的宽度处将clear: left; 添加到跳跃元素。 （在我的测试中，将其添加到 line 761 的 .five 元素可以防止它跳转。我在您的“Medium”媒体查询中尝试了它，因为您的布局只需要它位于min-width: 768px 和更广泛的位置。）

最终，由于浏览器四舍五入，您仍然会看到这些半行之间存在 1px 的高度不匹配，但通过清除问题区域中的浮动可以防止大问题。