HTML/CSS-Layout - Anzeige 2 Bilder vertikal in 1 Figur

Question

Dies ist eine Folgefrage von diesem Posten:

HTML/CSS How do I force images to horizontally display

Der Code unter 6 Zahlen angezeigt werden. Jede Figur enthält ein einzelnes Bild mit einer Bildunterschrift. Die Figuren sind horizontal in 2 vertikalen Gruppen angeordnet. Jetzt möchte ich jedem meiner Figuren ein weiteres Bild direkt unter dem ersten Bild (vertikal) hinzufügen. Der Rest des Layouts sollte gleich bleiben. Wie mache ich das? (I hinzugefügt, um die zusätzliche Beispielbild in jeder Figur, aber es zeigt sich horizontal statt vertikal.)

.group { 
 
     white-space: nowrap; 
 
    } 
 
    
 
    .group div { 
 
     display: inline-block; 
 
    }

 
     <div class="group"> 
 
      <div> 
 
       <figure> 
 
        <img src="example.jpg"/> 
 
        <img src="example2.jpg"/> 
 
        <figcaption>image</figcaption> 
 
       </figure> 
 
      </div> 
 
      <div> 
 
       <figure> 
 
        <img src="example.jpg"/> 
 
        <img src="example2.jpg"/> 
 
        <figcaption>image2</figcaption> 
 
       </figure> 
 
      </div> 
 
      <div> 
 
       <figure> 
 
        <img src="example.jpg"/> 
 
        <img src="example2.jpg"/> 
 
        <figcaption>image3</figcaption> 
 
       </figure> 
 
      </div> 
 
     </div> 
 
     <div class="group"> 
 
      <div> 
 
       <figure> 
 
        <img src="example.jpg"/> 
 
        <img src="example2.jpg"/> 
 
        <figcaption>image</figcaption> 
 
       </figure> 
 
      </div> 
 
      <div> 
 
       <figure> 
 
        <img src="example.jpg"/> 
 
        <img src="example2.jpg"/> 
 
        <figcaption>image2</figcaption> 
 
       </figure> 
 
      </div> 
 
      <div> 
 
       <figure> 
 
        <img src="example.jpg"/> 
 
        <img src="example2.jpg"/> 
 
        <figcaption>image3</figcaption> 
 
       </figure> 
 
      </div> 
 
     </div> 
 

Answer 1

einfach eine <br> zwischen den beiden Bildern stellen, dh

   <img src="example.jpg"/><br> 
       <img src="example2.jpg"/> 
       <figcaption>image</figcaption>