最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】HTML页面中把3张图横向排一排

HTML crifan 221浏览 0评论
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张图,上下顺序排列:
但是别人希望:水平排一排
所以再去想办法修改。
参考模板:
html5up-landed
去找代码,然后中间内部变图片
然后试了试,是可以横向排一排的显示了。
但是显示上有点问题:
【已解决】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>
即可实现要的效果:
三张图,从左到右,水平排列:
以及移动端现实时,从上到下:

转载请注明:在路上 » 【已解决】HTML页面中把3张图横向排一排

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
92 queries in 0.145 seconds, using 20.50MB memory