HTML页面中已实现用代码:
<div class="teacher_intro_parent"> <img class="teacher_intro" src="images/davinci_certificate_primary.jpg" /> <img class="teacher_intro" src="images/davinci_certificate_intermediate_color.jpg" /> <img class="teacher_intro" src="images/davinci_certificate_intermediate_edit.jpg" /> </div>
实现3张图,上下顺序排列:
![](https://www.crifan.com/files/pic/uploads/2021/05/fe1ca0820ee742e98be1679780fe3ac0.jpg)
但是别人希望:水平排一排
所以再去想办法修改。
参考模板:
html5up-landed
![](https://www.crifan.com/files/pic/uploads/2021/05/4249b33c3be740ad9ec3f6f87af8a1d5.jpg)
去找代码,然后中间内部变图片
然后试了试,是可以横向排一排的显示了。
但是显示上有点问题:
【已解决】HTML图片横向布局中第一张图片和其他图片高度不一致
【总结】
最后用代码:
<div class="box alt"> <div class="row gtr-uniform"> <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall"> <img class="certificate_image" src="images/davinci_certificate_primary_v2.jpg" /> </section> <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall"> <img class="certificate_image" src="images/davinci_certificate_intermediate_color.jpg" /> </section> <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall"> <img class="certificate_image" src="images/davinci_certificate_intermediate_edit.jpg" /> </section> </div> </div>
即可实现要的效果:
三张图,从左到右,水平排列:
![](https://www.crifan.com/files/pic/uploads/2021/05/13f2701f2df746659dfbe5e7e2eb889c.jpg)
以及移动端现实时,从上到下:
![](https://www.crifan.com/files/pic/uploads/2021/05/4afbc20fc7ff4d348171f0da6791a01c.jpg)
转载请注明:在路上 » 【已解决】HTML页面中把3张图横向排一排