如何在html中并排对齐图像？

Question

I have three images with text and headers I want them at the same row side by side. I'm trying to use float left for that but after hundreds of attempts, I failed.

<section class="boxes">

   <div class="box">
     <img src="img/brush.png">
     <h2>graphic desigen</h2>
     <p>Curabitur nec ultrices ex.  
   </dive>

   <div class="box">
     <img src="img/html.png">
     <h2>html 5 marckup</h2>
     <p>Curabitur nec ultrices ex.  
   </dive>     

   <div class="box">
     <img src="img/css.png">
     <h2>graphic desigen</h2>
     <p>Curabitur nec ultrices ex. 
   </div>          

</section>

Answer 1

The issue you have is not the images - its the divs - these are block level elements - so in order to align them in a horizontal row - you need to make them display: inline-block with CSS

 .box { display: inline-block; max-width: 33%; text-align: center } h2 { font-size: 18px; } p { font-size: 14px; } 

 <section class="boxes"> <div class="box"> <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" width="150"> <h2>graphic desigen</h2> <p>Curabitur nec ultrices ex. </div> <div class="box"> <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" width="150"> <h2>html5 markup</h2> <p>Curabitur nec ultrices ex. </div> <div class="box"> <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" width="150"> <h2>graphic desigen</h2> <p>Curabitur nec ultrices ex. </div> </section> 

Although this works - the newer way of showing images and associated headings / captions - is the HTML 5 figure element. This houses the image element and the figcaption element together

 .box { display: inline-block; text-align:center; max-width: 32%; } figcaption { width: 100px; display: block; } h2 { font-size: 12px; } p { font-size: 14px; } 

 <section class="boxes"> <div class="box"> <figure> <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" width="100" /> <figcaption> <h2>graphic desigen</h2> <p>Curabitur nec ultrices ex.</p> </figcaption> </figure> </div> <div class="box"> <figure> <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" width="100" /> <figcaption> <h2>html 5 marckup</h2> <p>Curabitur nec ultrices ex.</p> </figcaption> </figure> </div> <div class="box"> <figure> <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" width="100" /> <figcaption> <h2>graphic desigen</h2> <p>Curabitur nec ultrices ex.</p> </figcaption> </figure> </div> </section> 

Answer 2

You can also use CSS flex to achieve similar UI.

 .boxes { display: flex; } .box { padding: 1em; text-align: center; } h2 { font-size: 18px; } p { font-size: 14px; } 

 <section class="boxes"> <div class="box"> <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" width="150"> <h2>graphic desigen</h2> <p>Curabitur nec ultrices ex. </div> <div class="box"> <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" width="150"> <h2>html5 markup</h2> <p>Curabitur nec ultrices ex. </div> <div class="box"> <img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" width="150"> <h2>graphic desigen</h2> <p>Curabitur nec ultrices ex. </div> </section> 

Answer 3

I hate to add yet another version, but even more I hate non-responsive design with absolute "px" units.

The following example will nicely fill any page width, and will adjust to resizing:

 * { box-sizing: border-box; border-collapse: collapse; margin: 0; padding: 0; } figure, aside { border-style: solid; border-width: .05em; margin-left: 2%; page-break-inside: avoid; } figure img, aside img { width: 100%; height: auto; } figcaption { text-align: center; } figcaption>div { font-size: 110%; font-weight: bold; } .boxes figure { display: inline-block; width: 30%; } 

 <section class="boxes"> <figure> <img alt="cat1" src="https://i.stack.imgur.com/yTEcI.jpg" /> <figcaption> <div>graphic design</div> Curabitur nec ultrices ex. </figcaption> </figure><figure> <img alt="cat2" src="https://i.stack.imgur.com/yTEcI.jpg" /> <figcaption> <div>html 5 markup</div> Curabitur nec ultrices ex. </figcaption> </figure><figure> <img alt="cat3" src="https://i.stack.imgur.com/yTEcI.jpg" /> <figcaption> <div>graphic design</div> Curabitur nec ultrices ex. </figcaption> </figure> </section> 

Note that using <figure> and <figcaption> will improve search engine results. These tags tell the search engine that the caption belongs with the image. But with generic <div> tags, the search engine can only guess.