사진 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>