4枚の写真を並べて並べるにはどうしたらいいですか？

Question

私は基本的なオンラインストアタイプのレイアウトを作成しようとしています。ちょうど非常に基本的な初心者CSSとHTML

Answer 1

フレックス・スタイリングを使ってそれを行う方法です。 Thisは、フレックスボックスを学ぶのに最適なソースです（何かを忘れるたびに私が行っていることです）。

#container{ 
 
    display: flex; /*specifies that the items in the container should abide by flex styling*/ 
 
    flex-direction: row; /*aligns the items in the container in a row*/ 
 
} 
 

 
.imgContainer{ 
 
    text-align: center; /*aligns the text in the center*/ 
 
    padding: 2%; /*adds some extra white space around images*/ 
 
}

<!-- container element for all of the content. 
 
It will line up the imgContainers in a row--> 
 
<div id="container"> 
 
    <!--imgContainers will contain each img and text combination --> 
 
    <div class="imgContainer"> 
 
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"> 
 
    <p>This is an image</p> 
 
    </div> 
 
    <div class="imgContainer"> 
 
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"> 
 
    <p>This is an image</p> 
 
    </div> 
 
    <div class="imgContainer"> 
 
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"> 
 
    <p>This is an image</p> 
 
    </div> 
 
    <div class="imgContainer"> 
 
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"> 
 
    <p>This is an image</p> 
 
    </div> 
 
</div>