How do I place two images side by side in my doxygen mainpage

421 Views Asked by At

I am inexperienced with html so I am having trouble placing the images how I want (side by side). This is what I have in mainpage:

 68  * \htmlonly                                                                                                      
 69  * <div class="row">                                                                                              
 70  *   <div class="column">                                                                                         
 71  *     <img src="ConcreteBusFactory.png" alt="Concrete                                                            
 72  *                          factory" width="300"/>                                                                
 73  *                                                                                                                
 74  *   </div>                                                                                                       
 75  *   <div class="column">                                                                                         
 76  *     <img src="AbstractBusFactory.png" alt="Abstract                                                            
 77  *      factory" width="300"/>                                                                                    
 78  *   </div>                                                                                                       
 79  * </div>                                                                                                          
 80  * \endhtmlonly       

And the images come out on top of each other.

1

There are 1 best solutions below

0
On BEST ANSWER

use flex for this kind of thing. Makes it really easy.

.row{
display:flex;
justify-content:center;
}
 <div class="row">   
     <img src="ConcreteBusFactory.png" alt="Concrete factory" width="300"/>
     <img src="AbstractBusFactory.png" alt="Abstract factory" width="300"/>                               </div>