如何使用 HTML 和 CSS 并排对齐图像？

Question

I am trying to place three images on my page with text description underneath and three more images underneath those with text description underneath those images.

I need to create this using only HTML and CSS but not using Flex.

I've managed to get all 6 images going down the left of my page but no matter what I try - float, display, grid etc, I can not get a simple result.

Any suggestions? Thanks

Answer 1

You can do this with grid like you mentioned. you would used the grid-template-column property to define how you want your columns to be look.

Here I used 3 columns ( 1fr per column) to show an image and some text under it.

There are other ways to do this but grid is great for this kind of thing. You can then use a media query on .grid to display: block for mobile if you wanted them to stack

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } .child { padding: 10px; } img { width: 200px; height: auto; }

 <div class="grid"> <div class="child"> <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=640:*" alt="a dog" /> <p>some text</p> </div> <div class="child"> <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=640:*" alt="a dog" /> <p>some text</p> </div> <div class="child"> <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=640:*" alt="a dog" /> <p>some text</p> </div> </div>

Answer 2

You can try using setting the page up in a 'row' :

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

<style>
   .column {
     float: left;
     width: 33.33%;
     padding: 5px;
   }
</style>