CODEWITHSUNDEEP
html
Fahardine Ben Fahardine
Fahardine Ben Fahardine

Reputation: 115

Show several images in one div

How to show several images in one div using css and html?
Ex: https://www.awesomescreenshot.com/image/3066306/6f04718aa19dcc4b88192304a0f9a307 .

Here what I have done so far:

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

Upvotes: 0

Views: 721

Answers (2)

Calvin Nunes
Calvin Nunes

Reputation: 6516

  Separate the images in two different divs and put that divs inside a main div, then if you want, you can center the ContainerDiv or do whatever with that, and the content will be always two images per row.
But I suggest to use bootstrap to this kind of feature, but, anyways, here it come:

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

Fiddle: https://jsfiddle.net/prtanruz/

Upvotes: 1

pradeep kumar
pradeep kumar

Reputation: 1011

Can you try this?

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

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

Refer: JSFiddle

Upvotes: 1

Related Questions