HTML页面中已实现用代码：
1 2 3 4 5 | <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张图，上下顺序排列：
但是别人希望：水平排一排
所以再去想办法修改。
参考模板：
html5up-landed
去找代码，然后中间内部变图片
然后试了试，是可以横向排一排的显示了。
但是显示上有点问题：
【已解决】HTML图片横向布局中第一张图片和其他图片高度不一致
【总结】
最后用代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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> |
即可实现要的效果：
三张图，从左到右，水平排列：
以及移动端现实时，从上到下：
转载请注明：在路上 » 【已解决】HTML页面中把3张图横向排一排