元素不会连续水平滚动

Question

我想要连续显示几个div。 div 的容器有一个 x-scroll 属性和一个 max-width。但是所包含的元素不给想要合作。

这是我的代码：

.image_container {
  float: left;
  position: relative;
  top: 15px;
  margin-left: 5px;
  width: auto;
  height: 130px
}
.image {
  position: relative;
  margin-left: 25px;
}
.first_image {
  position: relative;
  margin-left: 50px;
}
.img_date {
  border-left: 1px solid;
  border-color: #fff;
  padding-left: 2px;
}
.gallery_container {
  position: relative;
  background-image: url(../img/gallery_container_bg.jpg);
  background-repeat: repeat;
  max-height: 150px;
  left: -50px;
  top: 50px;
  overflow-x: scroll;
  max-width: 800px;
  -webkit-box-shadow: inset 0 3px 5px 0 rgba(000, 000, 000, 0.1);
  box-shadow: inset 0 3px 5px 0 rgba(000, 000, 000, 0.1);
  white-space: nowrap;
}

<div class="gallery_container">
  <div class="image_container">
    <img src="path to img" height="120px" alt="alt" class="first_image image">
    <br>
    <span class="img_date first_image image">Text</span>
  </div>
  <div class="image_container">
    <img src="path to img" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
  <div class="image_container">
    <img src="path to img" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
  <div class="image_container">
    <img src="path to img" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
</div>

Answer 1

将 .image_container 设置为 display: inline-block 使图像内联显示。

.image_container {
  display: inline-block;
  position: relative;
  margin-left: 5px;
  width: auto;
}
.img_date {
  border-left: 1px solid;
  border-color: #fff;
  padding-left: 2px;
}
.gallery_container {
  position: relative;
  background-image: url(../img/gallery_container_bg.jpg);
  background-repeat: repeat;
  overflow-x: scroll;
  max-width: 800px;
  -webkit-box-shadow: inset 0 3px 5px 0 rgba(000, 000, 000, 0.1);
  box-shadow: inset 0 3px 5px 0 rgba(000, 000, 000, 0.1);
  white-space: nowrap;
}

<div class="gallery_container">
  <div class="image_container">
    <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" height="120px" alt="alt" class="first_image image">
    <br>
    <span class="img_date first_image image">Text</span>
  </div>
  <div class="image_container">
    <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
  <div class="image_container">
    <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
  <div class="image_container">
    <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
  <div class="image_container">
    <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
  <div class="image_container">
    <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
  <div class="image_container">
    <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" height="120px" alt="alt" class="image">
    <br>
    <span class="img_date image">Text</span>
  </div>
</div>

Answer 2

感谢您的回答！

我试过了，但对我不起作用。在我心脏病发作之后，我尝试了更多的东西并将 .gallery_container 设置为

display: inline-flex;

终于修好了！

元素不会连续水平滚动

elements won't stay in a row to be scrolled horizontally

html

css

overflow