纯css一页显示多个块的水平滑动效果

来源：互联网发布：马六甲知乎编辑：程序博客网时间：2024/05/27 16:41

gif效果图
png效果图
GIF图总是传不上。。。
今天公司让写一个水平滑动的小插件。
需求：移动端，自适应。
以前写过一个，用js根据每个块的宽度计算包含块的父级内容块宽度，在最外层包括一个想要的大小，overflow：auto。至此OK。
但是这次写时感觉不太好，1.因为我们只需要自适应移动端，所以不用考虑低级浏览器的兼容问题，就想用纯css写出来。
问题：最大的麻烦就是内容块一行显示并宽度自适应。本代码采用display: flex控制内容块显示，实现了想要效果。

直接上DEMO:

<style type="text/css"> html { font-size : 40px;}.chosen-container{    overflow: auto;}.chosen-swiper{    display: -moz-box; /*Firefox*/    display: -webkit-box; /*Safari,Opera,Chrome*/    display: box;    /*display: flex;/*发现他也可以但是好多移动端浏览器不支持，唉！浏览器厂家难为咱们前端啊*/*/}.chosen-swiper a{    width: 8rem;    height: 10.2rem;    padding: 1.5rem;    text-align: center;    border-radius: 0.35rem;    margin-left: 0.5rem;    background: #efefef;    color: #000;    text-decoration: none;    display:block!important;}.chosen-swiper a:first-child{    margin-left: inherit;}.chosen-swiper p{    font-size: 0.8rem;    margin: 0.4em 0;    white-space:nowrap;    overflow: hidden;    text-overflow: ellipsis;}.icon-swiper{    width: 3rem;    height: 3rem;    border-radius: 1.5rem;    display: block;    margin: 0 auto;}.chosen-swiper .button{    color: #FF4B4A;    line-height: 1.5rem;    height: 1.5rem;    margin-top: 0.7rem;    border: 1px solid #FF4B4A;    text-align: center;    border-radius: 0.25rem;    font-size: 0.7rem;    background:none;    width: 100%;}</style><div class="chosen-container">    <div class="chosen-swiper">        <a href="">            <img class="icon-swiper" src="/static/images/icon/placeholder.png" alt="头像">            <p>论坛昵称</p>            <p>个性签名字多的话用省略号显示</p>            <input type="button" class="button" value="查看">        </a>        <a href="">            <img class="icon-swiper" src="/static/images/icon/placeholder.png" alt="头像">            <p>论坛昵称</p>            <p>个性签名字多的话用省略号显示</p>            <input type="button" class="button" value="查看">        </a>        <a href="">            <img class="icon-swiper" src="/static/images/icon/placeholder.png" alt="头像">            <p>论坛昵称</p>            <p>个性签名字多的话用省略号显示</p>            <input type="button" class="button" value="查看">        </a>        <a href="">            <img class="icon-swiper" src="/static/images/icon/placeholder.png" alt="头像">            <p>论坛昵称</p>            <p>个性签名字多的话用省略号显示</p>            <input type="button" class="button" value="查看">        </a>        <a href="">            <img class="icon-swiper" src="/static/images/icon/placeholder.png" alt="头像">            <p>论坛昵称</p>            <p>个性签名字多的话用省略号显示</p>            <input type="button" class="button" value="查看">        </a>        <a href="">            <img class="icon-swiper" src="/static/images/icon/placeholder.png" alt="头像">            <p>论坛昵称</p>            <p>个性签名字多的话用省略号显示</p>            <input type="button" class="button" value="查看">        </a>        <a href="">            <img class="icon-swiper" src="/static/images/icon/placeholder.png" alt="头像">            <p>论坛昵称</p>            <p>个性签名字多的话用省略号显示</p>            <input type="button" class="button" value="查看">        </a>        <a href="">            <img class="icon-swiper" src="/static/images/icon/placeholder.png" alt="头像">            <p>论坛昵称</p>            <p>个性签名字多的话用省略号显示</p>            <input type="button" class="button" value="查看">        </a>    </div></div>

小弟经验不足，想了好久，就想出了这一个办法。还请哪位大神看到后，指出不足，并请在留言区给更好的方法，在此谢过！！！

1 0