Question

我正在尝试创建一个水平滚动的父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;

Answer 1

是的，使用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>

Answer 2

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

<!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)

如何创建一个具有多个div的水平滚动div

2 个答案: