Home > Software engineering >  How to add image next to other images?
How to add image next to other images?

Time:03-12

So i adding an image in HTML, i want to add more images next to it. but every time i try, it always placed in the next line of the web. should i use CSS? and what tag or element that i need to use?

<!DOCTYPE>
<html> 
  <img src="imageone"/>
  <img src="imagetwo"/>
  <!-- i want "imageone" to be placed next to "imagetwo"-->
</html>

CodePudding user response:

Nest the images in a parent div and give it a class. Then use flex.

.wrapper {
  display: flex;
  justify-content: space-evenly;
  margin: auto;
}

.wrapper img {
   max-width: 100%;
}
<!DOCTYPE>
<html>
<div >
  <img src="https://dummyimage.com/300/000/fff" />
  <img src="https://dummyimage.com/300/000/fff" />
</div>
</html>

  • Related