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>

Answer 2

试试这个：

.relatedphotos,html,body{
    width: 100%;
    display: block;
}
.relatedphotos a{
    display: inline;
    width: 25%;
}

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

2 个答案: