代码之家 › 专栏 › 技术社区 › Curnelious

在div中水平滚动

css html

Curnelious · 技术社区 · 5 年前

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) (不是屏幕)

3 回复 | 直到 5 年前

Abdul Basit 5 年前

打包上传 buttons 在一个 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;


}

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


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

mori 5 年前

你是说这样?

.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 从 ,添加 display: flex; 相反
flex: 0 0 auto; 在 .uploader

Andronicus 5 年前

只需添加这个样式提到的类

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