html - 在移动设备上将图像与边框 2 列对齐

Question

我有一些图像，我想在桌面上做 5 列，在移动设备上做 2 列，在桌面上它可以正常工作，但是在移动设备上 img-responsive 只显示 1 张图像时间，我想显示 2。

我用过 hidden-xs 但我认为这是错误的。两张图片没有对齐。

<style>
  #tudo {
    width: 100%;
  }
  
  @media screen and (min-width: 980px) {
    #tudu {
      margin-right: 50px;
    }
    #tudo1 {
      position: relative;
      width: 15%;
      margin-left: 4%;
      float: left;
      border: 2px solid #35c9b1;
      max-height: 300px;
    }
  }
  
  @media screen and (max-width: 500px)
  /* Mobile */
  
  {
    #tudo1 {
      position: relative;
      width: 46%;
      margin: 2%;
      float: left;
      border: 2px solid #35c9b1;
    }
  }
</style>
<div id="tudo" align="left">
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/200"></div>
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/150"></div>
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/140"></div>
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/130"></div>
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/120"></div>
</div>

Answer 1

我不是 100% 确定您想要实现什么，但我强烈建议您查看 CSS 网格布局。您可以使用它轻松获取列。一种方式是这样的。

#tudo {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(5, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 15px;
}

@media only screen and (max-width: 600px) {
   #tudo {
     grid-template-columns: repeat(2, 1fr);
   }
}

使用 grid-template-columns，您可以指定所需的列数，还可以将每列设置为特定宽度。 fr 用于分数，但您也可以使用百分比和以像素为单位的固定宽度。

例如如果你想固定每一行的第一项，其余的占用可用空间，你可以执行以下操作:

grid-template-columns: 300px repeat(4, 1fr);

有了这个，每行中的第一个元素将固定为 300px，其余将占用可用空间的 1/4。

在这里查看更多: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

使用 grid-column-gap 和 grid-row-gap 可以设置行和列之间的间距。

有关 CSS 网格的更多信息，请参阅此处的指南 https://css-tricks.com/snippets/css/complete-guide-grid/