在div内水平滚动

Question

我需要有一个divs的水平滚动条，每个div基本上都是一个图像上传器。

我有以下HTML / CSS代码：

.whiteBox {
  background-color: rgba(255, 255, 255, 0.95);
  margin-left: auto;
  margin-right: auto;
  margin-top: 15%;
  padding-top: 1px;
  box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
  overflow: auto;
}

.uploadBox {
  width: 90vw;
}

.uploader {
  background-color: rgb(250, 250, 250);
  width: 39vw;
  height: 25vh;
  margin-left: 4vw;
  margin-top: 4vw;
  box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
  float: left;
  max-height: 200px;
}

<div class="uploadBox whiteBox">
  <h1 class="fontTitle"> Upload Your Photos</h1>
  <hr>

  <div class="uploader boxCorners">
    <div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
      <input type="file" id="imageUpload1">
    </div>
  </div>


  <div class="uploader boxCorners">
    <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
      <input type="file" id="imageUpload2">
    </div>
  </div>

  <!-- many more divs like those goes here.. -->
</div>

我需要得到这个：

黄色是屏幕内部的一个框（div）（不是屏幕）

Answer 1

您的意思是这样吗？

.whiteBox
{
  background-color:  rgba(255,255,255,0.95);
  margin-left: auto;
  margin-right: auto;
  padding-top: 1px;
  box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
}

.uploadBox
{
   display: flex;
}

.uploader
{
  flex: 0 0 auto;
  background-color: rgb(250,250,250);
  width: 39vw;
  height: 25vh;
  margin-left:4vw;
  margin-top: 4vw;
  box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
  float: left;
  max-height: 200px;
}

<h1 class="fontTitle" > Upload Your Photos</h1>
<div class="uploadBox whiteBox">
                <hr>

                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
                       <input type="file" id="imageUpload1">
                       </div>
                </div>


                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
                
                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
                
                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
</div>

对代码进行了以下修改：

• 将h1移到.uploadBox之外
• 从width中删除.uploadBox，改为添加display: flex;
• 在flex: 0 0 auto;上添加.uploader

Answer 2

将上载x = [1,2,5,6,10] k = 3 n = 5 r = [[[] for _ in range(k)] for _ in range(n)] c = [[[] for _ in range(k)] for _ in range(n)] def f(s, j_down, t): return max(r[s][j_down], (x[t]-x[s+1])/2.) def get_min_f_and_s(j_down, t): """ range s from 1 to t-1 and set s to minimize f(s) for example t=5 and j=3, so s range from 1 to 4, if f(1)=0.5, f(2)=0.4, f(3)=0.1, f(4)= 1.0, so f(4) is min one and s=2. And r[5][j] = f(2). """ items = [(s, f(s, j_down, t))for s in range(t)] s, min_f = min(items, key=lambda x:x[1]) return s, min_f for j in range(k): if j == 0: for t in range(n): for t in range(n): r[t][j] = (x[t]-x[0])/2.0 c[t][j] = [(x[t]+x[0])/2.0] else: for t in range(1, n): s, min_f = get_min_f_and_s(j-1, t) r[t][j] = min_f c[t][j] = c[s][j-1] + [(x[t]+x[s+1])/2.,] print(r[-1][-1]) print(c[-1][-1]) 包装在buttons内，并为div赋予这些属性div overflow-x: scroll;

display:flex;

.whiteBox
{
  background-color:  rgba(255,255,255,0.95);
  margin-left: auto;
  margin-right: auto;
  margin-top: 15%;
  padding-top: 1px;
  box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
}

.scroller{
      overflow-x: scroll;
      display:flex;
}

.uploadBox
{
   width: 90vw;
}

.uploader
{

  background-color: rgb(250,250,250);
      width: 52vw;
  height: 25vh;
  margin-left:4vw;
  margin-top: 4vw;
  box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
  float: left;
  max-height: 200px;


}

Answer 3

只需添加此样式提及的课程

.uploadBox {display: flex;overflow-x: scroll;}