在一个div中显示几个图像

问题描述 投票：0回答：2

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

这是我到目前为止所做的：

<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>

https://jsfiddle.net/wa9gfgvz/

html
2个回答
2
投票

将图像分成两个不同的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/

1
投票

你能试试吗？

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

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

参考：JSFiddle

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.