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

我不确定您要实现什么目标，但我强烈建议您研究一下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用于分数，但是您也可以使用百分比和固定宽度（以px为单位）。

例如如果要固定每一行的第一项并其余部分占用可用空间，则可以执行以下操作：

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/

Answer 2

在移动样式中，您应将#tudo1的宽度减小4px，因为左边框为2px，右边框为2px。您可以使用calc(46% - 4px)

Answer 3

这是否显示您正在寻找的行为？

使用填充而不是边距来填充
使用box-sizing: border-box避免带有边框和填充的框模型宽度陷阱
在图像上使用max-width: 100%，以免图像超出容器大小</ li>
使用行内块+空格修复程序代替float，但这由您决定，如果使用浮点，则需要在#tudo上使用clearfix！
请勿多次使用ID，而应使用类。
媒体样式查询中未包含主要样式，请先移动（例如，全局样式用于移动）或先在桌面，然后选择性地将内容更改为用于较小的屏幕（在下面的示例中根据您的代码使用）

当然，您可以使用flexbox或css-grids来达到相同的目的，但是我试图保持与您作为代码输入提供的内容接近。

  * {
    box-sizing: border-box;
  }
  
  #tudo {
    font-size: 0;
    width: 100%;
  }
  
  .tudo1 {
    font-size: initial;
    display: inline-block;
    max-height: 300px;
    padding: 4%;
    position: relative;
    width: 20%;
  }
  .tudo1 img {
    border: 2px solid #35c9b1;
    display: block;
    max-width: 100%;
  }
  
  @media screen and (max-width: 500px)
  /* Mobile */
  
  {
    .tudo1 {
      width: 50%;
      padding: 2%;
    }
  }

<div id="tudo" align="left">
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
</div>

将图片与移动设备上的边框2列对齐

3 个答案: