Question

我已经针对这个问题尝试了几种解决方案，但似乎都没有。

我想要实现一个相当简单的事情：水平和垂直排列图像，以便空白空间充满照片。像这样：https://placekitten.com/

我似乎无法找到一种方法来显示另一种图像。

＆＃13;

.photos {
  white-space: nowrap;
  position: relative;
  width: 50%;
  margin: 2px;
}
.photos img {
  position: absolute;
  display: inline;
  vertical-align: top;
  padding: 2px;
  margin: 5px;
}

＆＃13;

<div class="photos">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />

  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg" />

  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" />
</div>

<div class="photos">
  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />
</div>

＆＃13;

我正在学习，我需要找到一种不使用Javascript的方法。我认为它必须是一个容器div是相对的一些工作，图像是绝对的块。

我认为有一种方法可以用＆lt; li＆gt;，虽然我不知道哪个是，但我也不认为这是最好的方式。你能救我吗？

编辑：在注意到我的CSS没有被链接之后，我实际上让我的想法工作，但我仍然无法阻止图像在缩小或放大时重新定位自己 -

.photos {
    width: 70%;
    min-width: 
    height: auto;
    margin: 5px auto;
    position: relative;
    }

.photos h {
    font-family: "Cooper STD", "Times", Courier, sans-serif;
     display: inline-block;
  float: left;
  margin: auto;
  margin-top: 5px;
  max-width: initial;
  position: relative;
}

.photos img {
  display: inline-block;
  float: left;
  margin: 5px;
  margin-bottom: 5px;
  max-width: 70%;
  position: inherit;
}

* {
    box-sizing: border-box;
}

<div class="photos">
<div class="box">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
  <h>Foto gattini</h>
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" alt="" />
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg" />

  <img src="http://i.ytimg.com/u/oxV7JbqVE-ZdnOYL0l3vIw/channels4_banner.jpg?v=516733c3" alt="" />
  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />

  <img src="http://bit.ly/PiQUaV" alt="" />
  <h>Questa e' una griglia responsive d'immagini</h>
     <img src="http://bit.ly/PiQUaV" alt="" />
     </div>
</div>

Answer 1

我认为这就是你想要的。我只创建了网格。你只需将你的图像放入其中。只需将你的img标签放入网格中并给它width和{{1} } height。希望这会对你有所帮助。工作!!

＆＃13;

100%

＆＃13;

Answer 2

如果您使用网格，则可以根据需要堆叠它们。我不确定你是否使用任何框架，但bootstrap和foundation使得定位这样的东西非常容易。您将堆叠行并使用所述行在列中组织图片。这是一个关于使用网格Grid Systems

的精彩教程

纵向和横向排列图像（CSS）

2 个答案: