html - 如何将可变宽度的多个图像放入一行并使其响应？

Question

我有 4 张图片连续显示，如下所示。图像的宽度可变。图片列表是随机生成的，所以我无法预测它们的宽度。但我需要将它们全部放在一行中。即使在较小的设备中，它也应该排成一排。我该怎么做？

<div class="relatedphotos">
  <a href="/photos/natural-wonders-of-world-26051931">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_26051931-img_05_l.jpg" alt="Thumb 26051931 img 05 l">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-35991100">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_35991100-wallhaven-65322.jpg" alt="Thumb 35991100 wallhaven 65322">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-84217069">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_84217069-20140929_170747.jpg" alt="Thumb 84217069 20140929 170747">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-18133515">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_18133515-wallhaven-141502.jpg" alt="Thumb 18133515 wallhaven 141502">
      <p>Natural Wonders of World</p>
    </div>
  </a>
</div>

这是 CSS:

.relatedphotos {
    width: 100%;
    white-space: nowrap;
    display: table;
    .relatedphoto {
        max-width: 100%;
        background-color: #FFFFFF;
        padding: 5px;
        border: 1px solid #DDDDDD;
        margin-left: 2px;
        margin-right: 2px;
        -webkit-box-shadow: 0 7px 5px -7px #ADADAD;
        -moz-box-shadow: 0 7px 5px -7px #ADADAD;
        box-shadow: 0 7px 5px -7px #ADADAD;
        vertical-align: middle;
        display: table-cell;
        float: left;
        p {
            margin-top: 5px;
            margin-bottom: 0px;
            text-align: center;
            color: #808080;
            font-size: 12px;
        }
    }
}

Answer 1

由于图像的数量是已知的 (4)，您可以将行的宽度除以 4。

*{
  padding:0; 
  margin:0;
}

.relatedphoto{
  width:25%;
  float:left;
}

.relatedphoto img{
  width:100%;
  }

<div class="relatedphotos">
  <a href="/photos/natural-wonders-of-world-26051931">
    <div class="relatedphoto">
      <img src="http://i.imgur.com/T0vyMZs.jpg" alt="Thumb 26051931 img 05 l">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-35991100">
    <div class="relatedphoto">
      <img src="http://i.imgur.com/T0vyMZs.jpg" alt="Thumb 35991100 wallhaven 65322">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-84217069">
    <div class="relatedphoto">
      <img src="http://i.imgur.com/aIkyKP8.jpg" alt="Thumb 84217069 20140929 170747">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-18133515">
    <div class="relatedphoto">
      <img src="http://i.imgur.com/T0vyMZs.jpg" alt="Thumb 18133515 wallhaven 141502">
      <p>Natural Wonders of World</p>
    </div>
  </a>
</div>