微信推文里的轮播图

阿Paul

推文里默认宽度都为100%;图片插入都为p标签,所以可以用section标签来区分代码自已写的还是上传图片时编辑器自动生成的。

<section id="轮播" style="background:url(背景图) no-repeat 0 0 / 100%;">
    <section id="图片容器" style="width:100%;overflow-x:scroll;">
        <section id="超宽的容器" style="width:200%;max-width:none !important;overflow:hidden;">
            <section id="图片1容器" style="width:50%;float:left;"><img src="图1" style="display:block;width:100%;"></section>
            <section id="图片2容器" style="width:50%;float:left;"><img src="图2" style="display:block;width:100%;"></section>
        </section>
    </section>
</section>
  • 图片容器设置横向超出部出现滚动条
  • 超宽容器width设置成图片的数量x100%,此处2张图片设置成200%。去掉max-width是因为推文中默认为100%。overflow可以使其有高度。
  • 最里面的图片,此处为2张,所以每张50%,如果3张就设置为33.33%,float:left是让图片不换行,在一排并列。图片设置为display:block;可以去掉图片底下自动产生的空格。
阅读 129
0 声望
0 粉丝
0 条评论
你知道吗?

0 声望
0 粉丝
宣传栏