html - 媒体查询中的响应式网格布局中断

Question

需要一些帮助来弄清楚为什么底部图像不断推出。我有一个响应式网格布局和开发个人网页。图像设置为以 4 列布局显示，媒体查询设置为更改为 2 列布局 @ 800px。当我通过拖动边缘调整浏览器宽度时，布局会中断，然后每隔几像素窗口就会自动打开和关闭。例如。在 800px 时布局很好，在 799px 时它坏了，在 797px 时很好等等。为什么会这样？

链接到页面 HTML 和 CSS

<p data-height="265" data-theme-id="0" data-slug-hash="VMeJMq" 
   data-default-tab="css,result" data-user="smedz28" 
   data-embed-version="2" data-pen-title="Media query breaking" 
   class="codepen">See the Pen 
   <a href="https://codepen.io/smedz28/pen/VMeJMq/">Media query breaking</a> 
     by Marc Smedley (<a href="https://codepen.io/smedz28">@smedz28</a>) 
     on <a href="https://codepen.io">CodePen
   </a>.
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js">
</script>

codepen

Answer 1

由于 codepen 中的图像没有来源，因此无法复制该行为。

使用 DOM 检查器，所有图像都定义了 max-width:100% 属性。由于 CSS Box Model ，这可能会导致图像宽度大于 100%，因为它们还设置了 border:3px。

尝试调整 max-width 来补偿边框:

img {
  max-width:calc(100% - 6px);
}

或

img {
  max-width:calc(100% - 6px) !important;
}

如果您需要强制覆盖其他选择器。