【Css】Css实现div卡片【横向滑动】效果（图文+完整源代码）

敦厚的曹操

已于 2023-07-01 17:16:55 修改

阅读量3.8k

点赞数 1

分类专栏： 5.【css】 4.【html】文章标签： css html 前端

于 2022-05-16 17:15:28 首次发布

本文链接：https://blog.csdn.net/dxnn520/article/details/124745103

版权

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

一、css结合:class实现

 <div :class="{
          class_1: Value === index,
          class_2: Value !== index,
        }" >

二、另一例子

代码：

<body>
    <div class="box">
        <div class="card">卡片1</div>
        <div class="card">卡片2</div>
        <div class="card">卡片3</div>
        <div class="card">卡片4</div>
        <div class="card">卡片5</div>
        <div class="card">卡片6</div>
</body>

<style>

.box{
    height:300px;
    background: #eee;
    padding: 10px 0;
    white-space: nowrap; /* 禁止超出自动换行 */
    overflow-y:auto; /* 横向滑动 */
}
/*隐藏下面的滚动条*/
.box::-webkit-scrollbar{
    display: none;
}

.card{
    width: 300px;
    height: 300px;
    background: rgb(223, 223, 223);
    display: inline-block; /*行内块元素*/
    border-right:5px rgb(255,255,255) solid;
    font-size: 25px;
    text-align: center;
    line-height: 300px;
}
</style>