css - 使用媒体查询将 1 行和 4 个 div 分成 2 行和两列

Question

我试图在屏幕上用 4 个等于或小于 800 像素的图像打破下一行: 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 作为表格中的列。下面的链接详细说明了如何为较小的屏幕将表格列拆分为 2 个不同的行 - Split Table Row(s) for smaller screens