设置两行多列向右排列，超出部分向右滑动

最新推荐文章于 2024-04-15 16:43:52 发布

grtjh203

最新推荐文章于 2024-04-15 16:43:52 发布

阅读量319

点赞数 4

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_59297167/article/details/135907935

版权

可以实现向右滑动，

父元素设置：

display: flex;

flex-direction: column;

flex-wrap: wrap;

overflow-x: auto;

子元素设置：

要确保子元素的高度是父元素的一半

设置滚动条的样式：

park-right是父元素的类名：

.park-right::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: rgb(55 69 109);
}

.park-right::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background-color: rgba(0, 0, 0, .8);
}

.park-right::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 2px rgba(81, 167, 255, .3);
    background-color: rgba(81, 167, 255, .8);
}