实现两行(只是视觉效果,实则是一整个盒子)同时滑动,超出隐藏

最新推荐文章于 2024-05-21 21:13:29 发布

王思磊（山丘）

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量95

点赞数

文章标签： css html javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_51958500/article/details/129216900

版权

代码示例:

HTML

<div class="max-box">
        <div class="min-box">
            <span>沧海月明珠有泪</span>
            <span>噫吁戯</span>
            <span>最是人间留不住,朱颜辞镜花辞树</span>
            <span>青山料我,应如是</span>
            <span>尔来四万八千岁,不与秦塞通人烟</span>
            <span>妻之美我者</span>
            <span>身无彩蝶双飞翼,心有灵犀一点通</span>
        </div>
 </div>

CSS

//主要代码
.max-box {
            overflow: auto;
        }

.min-box {
            width: 200%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
//次要样式代码
span {
            margin: 4px 1px;
            padding: 10px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border: 1px solid red;
        }