Блог

Главная - Вопросы по программированию - Горизонтальная прокрутка внутри div

Горизонтальная прокрутка внутри div

#html #css

#HTML #css

Вопрос:

Мне нужно иметь горизонтальный скроллер, 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) внутри экрана (не сам экран)

Ответ №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

Ответ №2:

Завершите загрузку 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;


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

Комментарии:

1. заголовок также будет прокручиваться влево по какой-то причине, даже если он находится за пределами div скроллера.

2. @Curnelious удалить overflow: auto; из .whiteBox

3. спасибо, если я это сделаю, вся страница и фон будут прокручиваться влево .. еще хуже

4. вы запустили приведенный выше фрагмент? Это работает соответствующим образом?

5. ваш работает, а мой нет. Проверит, почему, хотя это то же самое

Ответ №3:

Просто добавьте этот стиль, упомянутый в классе

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

Комментарии:

1. Таким образом h1 не останется над .uploaders .