Question

如何使用css和html在一个div中显示多个图像？
例如：https://www.awesomescreenshot.com/image/3066306/6f04718aa19dcc4b88192304a0f9a307。

到目前为止我做了什么：

＆＃13;

<body>
  <div class="deck">
    <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
    <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
    <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
    <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">

  </div>
</body>

＆＃13;

https://jsfiddle.net/wa9gfgvz/

Answer 1

将图像分成两个不同的div并将这些div放在一个主div中，然后如果需要，可以将ContainerDiv置于中心或者做任何事情，内容将始终是每行两个图像。
但我建议使用bootstrap来实现这种功能，但无论如何，它来了：

<div class='ContainerDiv'>
      <div class="deck">
          <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
          <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
      </div>

      <div class="deck">
          <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
          <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">
      </div>
</div>

CSS：

.deck{
   display:flex;
}

小提琴：https://jsfiddle.net/prtanruz/

Answer 2

你能试试吗？

  .deck{
    display:block;
    width:100%;
    }

  .deck img{
    width:50%;
    float:left;
  }

参考：JSFiddle

在一个div中显示几个图像

2 个答案: