用了flex布局和overflow之后右边距失效解决办法

最新推荐文章于 2023-12-12 18:23:00 发布

仙女爱吃鱼

最新推荐文章于 2023-12-12 18:23:00 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： css flex overflow

本文链接：https://blog.csdn.net/weixin_38318244/article/details/120498929

版权

css 专栏收录该内容

21 篇文章

订阅专栏

场景

项目中自己写一个轮播图，使用display:flext布局和oveflow-x:scroll等属性设置后，右边距失效了（仅在移动端）

解决办法

为div添加伪元素

 .swiperWrapper  ::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; //占位但不可见
  }

   .swiperWrapper {
        // background: yellow;
        display: flex;
        justify-content: flex-start;
        position: relative;
        width: 100%;
        height: 100%;
        padding-left: 15px;
        margin-right: 5px;
        padding-bottom: 60px;// 滚动条向下移，外层盒子给定高overflow:hidden，解决ios无法隐藏滚动条问题
        box-sizing: border-box;
        overflow-x: scroll;