css 横向滚动条加高度自适应

最新推荐文章于 2024-05-24 17:17:32 发布

曲小强

最新推荐文章于 2024-05-24 17:17:32 发布

阅读量1.4k

点赞数

分类专栏： CSS 文章标签： css 前端 vue.js

本文链接：https://blog.csdn.net/quhongqiang/article/details/126852001

版权

CSS 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

请添加图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<style>
  * {
    margin: 0; padding: 0;
  }
  .video_list {
    margin: 10px;
    display: flex;
    overflow-y: hidden;
  }
  .video_list li {
    border: 1px solid #aaa;
    border-radius: 5px;
    margin-right: 10px;
    display: inline-block;
    padding: 10px;
  }
  .video_list li img {
    width: 100%;
    border-radius: 5px;
  }
  .video_list li:nth-last-child(1) {
    margin-right: 0;
  }
  .video_list::-webkit-scrollbar{
    display: none;
  }
  .title {
    width: 120px;
    /* autoprefixer: off */
    /* autoprefixer: ignore next */   
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
  }
  .cell {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
  del {
    font-size: 12px;
  }
</style>
</head>
<body>
<div id="app">
  <div>
    <ul class="video_list" ref="content">
      <li v-for="(item, index) in list" :key="index">
        <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt="">
        <div class="title">{{item.title}}</div>
        <div class="cell">
          <span>￥259</span>
          <span>+</span>
        </div>
        <del>￥275.25</del>
        <div v-if="item.isBtn">
          <button>查看详情</button>
        </div>
      </li>
     </ul>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    list: [
      {
        title: '啊啊啊啊啊啊啊啊',
        isBtn: false,
      },
      {
        title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        isBtn: true,
      },
      {
        title: '啊啊啊啊啊啊啊啊',
        isBtn: true,
      },
      {
        title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        isBtn: false,
      },
      {
        title: '啊啊啊啊啊啊啊啊',
        isBtn: false,
      },
      {
        title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        isBtn: true,
      }
    ]
  }
})
</script>
</body>
</html>