HTML/CSSレイアウト - 1つの図の縦方向の表示2枚の画像を

Question

これは、このポストからのフォローアップの質問です：次のコードは、6つの数字を表示します

HTML/CSS How do I force images to horizontally display

。各図には、キャプション付きの1つの画像が含まれています。図は水平に2つの垂直グループに3つ配置されています。今度は、最初の画像のすぐ下（垂直）に、それぞれの図に追加の画像を追加したいと思います。残りのレイアウトは同じままにする必要があります。それ、どうやったら出来るの？ （Iは各図に余分例イメージを追加し、それは水平の代わりに垂直に表示されます。）

.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

は単にすなわち

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