html - 如何响应式地将图像排列在 div 内的一行中

Question

我试图将链接放在一行图像上，以便不同的图像具有不同的链接。我还让这个 div 缩小以适应某些媒体屏幕尺寸。但是，图像没有根据包装要求调整大小。请帮忙。

这是 HTML:

.box {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    text-align: center;
    background: url(image/bg.png) center top;
  }
  #wrapper {
    width: 768px;
    margin: 0 auto;
    background-color: #fff;
  }
}
@media screen and (min-width: 1024px) {
  body {
    text-align: center;
    background: url(image/bg.png) center top;
  }
  #wrapper {
    width: 500px;
    margin: 0 auto;
    background-color: #fff;
  }

<div id="wrapper">
  <div class="box">
    <img src="image/pea.jpg">
  </div>
  <div class="box">
    <img src="image/pea_01.jpg">
    <img src="image/pea_02.jpg">
    <img src="image/pea_03.jpg">
    <img src="image/pea_04.jpg">
    <img src="image/pea_05.jpg">
  </div>
  
  <!-- main issue here -->
  <div class="box">
    <img src="image/pea_footer.jpg">
  </div>
</div>

这是队列的屏幕截图(桌面)。添加 display:inline-block; 后，移动设备似乎看起来不错 宽度:自动；到盒子:

Answer 1

我认为删除任何静态宽度，因为您只需要检测视口(viewport)何时达到特定大小，然后更改 img 宽度，就像我在这里所做的那样。我将每个图像设置为显示 block ，以删除它们周围的任何边距或填充。您可能不想这样做，但我喜欢将其设置为默认值。

这样您就可以选择适合您的不同断点，而不是在每个断点处设置静态宽度。这就是响应式开发的美妙之处。保持灵活性，而不是控制包含 div 的情况；让内容主导一切。在全屏模式下运行下面的代码片段以查看完整的桌面样式(每个图像变为 20% 而不是 50%):

.box {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}

img {
  display: block;
  width: 20%;
  float: left;
  }

@media screen and (max-width: 767px) {
img {
width: 50%;
}
}

<div id="wrapper">
  <div class="box">
    <img src="http://placehold.it/100x100">
  </div>
  <div class="box">
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
  </div>
  
  <!-- main issue here -->
  <div class="box">
    <img src="http://placehold.it/100x100">
  </div>
</div>