如何创建内部有多个Divs的水平滚动div

我正在尝试创建一个水平滚动的父div，其中有4个孩子div。尝试此问题后，我已经陷入了一个问题，父母为我提供了一个滚动条，它太大了，无法浏览所有四个较小的儿童divs。然后，它在页面底部给了我第二个滚动条，使我可以完全滚动，但是这样做会移动整个页面，而不仅仅是parentdiv。

请参阅此处的代码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>

我在这里创建了这个超简单的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        .scroll {
          overflow-x: auto;
        }
        .scroll__container {
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
        }
        .scroll__box {
          min-width: 90%;
          margin-right: 2%;
          margin-bottom: 0;
        }
    </style>
    <section class="scroll">
    <div class="scroll__container">
      <div class="scroll__box">
         <h2>Lorem ipsum dolor sit amet.</h2>
         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
      </div>
      <div class="scroll__box">
         <h2>Lorem ipsum dolor sit amet.</h2>
         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
      </div>
      <div class="scroll__box">
         <h2>Lorem ipsum dolor sit amet.</h2>
         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
      </div>
      <div class="scroll__box">
         <h2>Lorem ipsum dolor sit amet.</h2>
         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
      </div>
    </div>
</section>
</body>
</html>

[Codepen reference](https://codepen.io/proochster/pen/RzgPNQ?editors=1100)

相关内容

最新更新

热门标签：