Question

我正在尝试用等于或小于800px的屏幕上的4张图像中断下一行： https://i.ibb.co/1RmqDN2/1row.jpg

分为2行2列，所以看起来像这样： https://i.ibb.co/DWJp7mM/2row.jpg

我正在使用媒体查询来尝试实现它，但是我没有找到解决方案。我是一个编码菜鸟，也是CSS，希望获得一些帮助。到目前为止，这是我尝试过的：

          @media only screen and (max-width: 800px) {
              .AR_55.ob-strip-layout .ob-dynamic-rec-container /*This is the selector of each column (image and the text below it)
              {
                  width:25%;
                  float:left;
              }
          }

这是我得到的最近的东西：

          @media only screen and (max-width: 800px) {
              .AR_55.ob-strip-layout .ob-dynamic-rec-container /*This is the selector of each column (image and the text below it)
              {
                  width:45%;
                  float:left;
              }
          }

它分成2列和2行，但是对齐方式不好，我无法修复。

有什么想法吗？如果需要，很高兴提供更多信息。谢谢！

Answer 1

要实现完美对齐，可以将这些div作为表中的列。下面的链接详细说明了如何将表格的列分为两行以显示较小的屏幕， Split Table Row(s) for smaller screens

Answer 2

使用您的方法，以下方法应该起作用：

.AR_55.ob-strip-layout .ob-dynamic-rec-container {
  width: 25%;
  float: left;
}

@media only screen and (min-width: 800px) {
  .AR_55.ob-strip-layout .ob-dynamic-rec-container {
    width: 50%;
    float: left;
  }
}

我还在媒体查询中使用了min-width，我的偏好设置为here

此外，您也可以使用在代码笔或类似物中与我们共享的代码来随时更新您的问题。

将带有4个div的1行分成2行，并通过媒体查询划分为

2 个答案: