CSS：从1行4张变为2行2张

Question

我在 1 行中有 4 张图像。 当响应视图处于活动状态时，我需要让它们在 2 行中的 2 个图像中发生变化。 我该怎么做？

Here is my page, I need to fix 4 iframes at the bottom

Answer 1

好的，现在您已将 link 添加到您的页面，答案很简单。每个 iframe 都有一个固定的像素宽度值。如果您想将其限制为每行 2 个，只需给 iframe 元素一个 float:left; 、 width:50%; 和 margin:0 0 10px 0; （以摆脱使总宽度变大的横向边距对于初学者，每个 class 超过 100%）。在那之后，你需要做的就是使用 margin/padding 值来获得你想要的 spacing/specific 外观。

总而言之，尝试将此添加到您的 css:

iframe {
   float:left;
   width:50%;
   margin:0 0 10px 0 !important;
}