我是HTML的新手，正在尝试创建一个包含三个居中图像（并排显示）的网页。这是我的代码：
<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>这段代码创建了图像并将它们居中，但是如果标题或描述不完全相同，则图像将偏移（例如：如果最左边图像的标题非常罗y，则该图像看起来会比其他两个图像高） 。有没有什么办法解决这一问题？
您应该尝试使用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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句