代码示例:
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;
}
结果展示
![](https://i-blog.csdnimg.cn/blog_migrate/d244dc3b9d195b7a21ddc6f3ac10e9f1.png)
个人见解,敬请斧正