캡션 및 설명이있는 세 개의 이미지를 가운데에 배치하는 방법은 무엇입니까? HTML

Question

저는 HTML을 처음 사용하며 가운데에 3 개의 이미지 (나란히 표시됨)가있는 웹 페이지를 만들려고합니다. 여기 코드 나는이된다

<center> 
 
<figure style="display:inline-block;text-align:center;top:350px"> 
 
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block"> 
 
    <img src="images/website-main1.jpg" style="margin-bottom:10px" width="275px" height="175px" /> 
 
    <figcaption style="text-align:center">This is an example of a super long caption that will make the images offset</figcaption> 
 
    <div style="text-align:left"> 
 
    <p>description example</p> 
 
    </div> 
 
    </div> 
 
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block"> 
 
    <img src="images/website-main6_1.jpg" style="margin-bottom:10px" width="275px" height="175px" /> 
 
    <figcaption style="text-align:center">First image</figcaption> 
 
    <div style="text-align:left"> 
 
    <p>description</p> 
 
    </div> 
 
    </div> 
 
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block;"> 
 
    <img src="images/a1_orig.jpg" style="margin-bottom:10px" width="275px" height="175px" /> 
 
    <figcaption style="text-align:center">First image</figcaption> 
 
    <p>description</p> 
 
    </div> 
 
</figure> 
 
</center>

이 코드는 이미지를 생성하고이를 중심으로하지만, 자막이나 설명이 동일하지 않은 경우, 이미지가 (EX를 상쇄하십시오 만약 가장 왼쪽의 이미지에있는 캡션은 매우 어리 석고 그 이미지는 다른 두 개의 이미지보다 높게 나타납니다). 이 문제를 해결할 수있는 방법이 있습니까?

Answer 1

CSS를 사용해보십시오! HTML을 유지 관리하는 것이 훨씬 쉽습니다.

또한 Flexbox 사용을 고려해야합니다.

나는 당신을 위해 데모를 만들었습니다 :

https://jsfiddle.net/djzyvtvh/1/ 지금처럼 사진과 캡션의 모든 주위에 DIV를 추가

이

.container { 
    display:flex; 
    width:90%; 
    margin:0 auto; 
} 

사용 : display:flex가 인 flexbox 수 있도록.

그런 다음 각각 flex:1 속성을 상자를주고, 각각의 항목과 같다 : 예상대로 작동하고

.box { 
    flex:1; 
    margin:0 4px; 
}