个人中心
gpt4 book ai didi

html - 如何创建一个水平滚动的div，里面有多个div

转载 作者：行者123 更新时间：2023-11-28 19:24:01 24 4
gpt4 key购买 nike

我正在尝试创建一个水平滚动的父 div，其中包含 4 个其他子 div。在尝试这个之后我遇到了一个问题，父 div 给了我一个滚动条，它太大而无法通过所有 4 个较小的子 div。然后它在页面底部给我第二个滚动条，允许我完全滚动，但这样做会移动整个页面，而不仅仅是父 div。

请在此处查看代码 https://jsfiddle.net/callum2321/8jq4bmxk/ 

slider {
    top: 250px;
    width: 400%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: normal;
    white-space: nowrap;
    max-height: 80%;
}

box {
    display: inline-block;
    white-space: nowrap;
    margin: 3% 3%;
    width: 20%;
    height: 450px;
    border: 1px solid white;
}

.box:hover {
    box-shadow: 4px 4px 14px 14px darkred;
    border-radius: 2px;
}

.col-1 {max-width: 100%; max-height: 45%; background-color: 
purple;}
.col-2 {width: 100%; height: 55%; background-color: purple;}

#boxA-pic {
    max-height: 40%;
    max-width: 100%;
    object-fit: cover;
}

#boxA-info {
    overflow-y: scroll;
}

#boxA-info h1 {
    text-align: center;
    color: white;
}

#boxA-info p {
    white-space: normal;
}

#boxB-pic {
    max-height: 40%;
    max-width: 100%;
    object-fit: fill;
}

#boxB-info {
    overflow-y: scroll;
}

#boxB-info h1 {
    text-align: center;
    color: white;
}

#boxB-info p {
    white-space: normal;
}

#boxC-pic img{
    max-height: 40%;
    max-width: 100%;
    object-fit: fill;
}

#boxC-info {
    overflow-y: scroll;
}

#boxC-info h1 {
    text-align: center;
    color: white;
}

#boxC-info p {
    white-space: normal;
}

#boxD-pic img {
    max-height: 40%;
    max-width: 100%;
    object-fit: fill;
}

#boxD-info {
    overflow-y: scroll;
}

#boxD-info h1 {
    text-align: center;
    color: white;
}

#boxD-info p {
    white-space: normal;

最佳答案

是的，使用 flexbox 编码或多或少容易一些:

<!DOCTYPE html>
<html>
    <head>
    <style>
    .flex-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: DodgerBlue;
    }
    
    .flex-container > div {
      background-color: #f1f1f1;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
    </style>
    </head>
    <body>
    <h1>Flexible Boxes</h1>
    
    <div class="flex-container" style="overflow: auto;">
      <div>AAAAA</div>
      <div>BBBBB</div>
      <div>CCCCC</div>  
      <div>DDDDD</div>
      <div>EEEEE</div>
      <div>FFFFF</div>  
      <div>GGGGG</div>
      <div>HHHHH</div>
    </div>
    
    </body>
</html>

关于html - 如何创建一个水平滚动的div，里面有多个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56735666/

24 4 0
文章推荐： javascript - 如何为节目中的按钮设置动画？
文章推荐： objective-c - 将标签栏应用程序与导航 Controller 一起使用
文章推荐： python - 用 BeautifulSoup 解析，报错 TypeError : coercing to Unicode: need string or buffer, NoneType found
文章推荐： iphone - iOS 手势问题 - 如何检测持续触摸特定时间间隔的触摸事件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com