让图片横向滚动

Question

我正在尝试让一行图片停留在一行内，然后使用overflow: scroll进行横向滚动；然而，无论我做什么，这些项目都会一直位于另一个项目的下方。

<div class="portfolio_row">
    <div class="portfolio_item">
        <a href="#">
            <img src="portfolio1.jpg"></img>
        </a>
    </div>
    <div class="portfolio_item">
        <a href="#">
            <img src="portfolio2.jpg"></img>
        </a>
    </div>
    <div class="portfolio_item">
        <a href="#">
            <img src="portfolio1.jpg"></img>
        </a>
    </div>
    <div class="portfolio_item">
        <a href="#">
            <img src="portfolio2.jpg"></img>
        </a>
    </div>
</div>

和css：

.portfolio_row {
    width: 100%;
    float: left;
    white-space: nowrap; 
    overflow-x: scroll;
}

.portfolio_item {
    float: left;
}

.portfolio_item img {
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 950px) {
    .portfolio_item {
        width: 50%;
    }
}
@media screen and (min-width: 1550px) {
    .portfolio_item {
        width: 33%;
    }
}

有没有人知道我怎么才能让图片保持在一行并横向滚动，而不是让它们在彼此下面滚动？

Answer 1

您可以使用display: inline-block而不是float。也不需要容器上的width属性。

​

.portfolio_row {
  white-space: nowrap;
  overflow-x: scroll;
}

.portfolio_item {
  display: inline-block;
}

.portfolio_item img {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 950px) {
  .portfolio_item {
    width: 50%;
  }
}

@media screen and (min-width: 1550px) {
  .portfolio_item {
    width: 33%;
  }
}

<div class="portfolio_row">
  <div class="portfolio_item">
    <a href="#">
      <img src="https://placehold.it/400x400">
    </a>
  </div>
  <div class="portfolio_item">
    <a href="#">
      <img src="https://placehold.it/400x400">
    </a>
  </div>
  <div class="portfolio_item">
    <a href="#">
      <img src="https://placehold.it/400x400">
    </a>
  </div>
  <div class="portfolio_item">
    <a href="#">
      <img src="https://placehold.it/400x400">
    </a>
  </div>
</div>

​

Answer 2

使用display: inline-block来对齐图像，而不是在portfolio_item类中使用float: left

​

.portfolio_row {
    width: 100%;
    float: left;
    white-space: nowrap; 
    overflow-x: scroll;
}

.portfolio_item {
    display: inline-block;
}

.portfolio_item img {
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 950px) {
    .portfolio_item {
        width: 50%;
    }
}
@media screen and (min-width: 1550px) {
    .portfolio_item {
        width: 33%;
    }
}

<div class="portfolio_row">
    <div class="portfolio_item">
        <a href="#">
            <img src="http://i1.mirror.co.uk/incoming/article7731571.ece/ALTERNATES/s298/Pokemon-charmander.png"></img>
        </a>
    </div>
    <div class="portfolio_item">
        <a href="#">
            <img src="http://i1.mirror.co.uk/incoming/article7731571.ece/ALTERNATES/s298/Pokemon-charmander.png"></img>
        </a>
    </div>
    <div class="portfolio_item">
        <a href="#">
            <img src="http://i1.mirror.co.uk/incoming/article7731571.ece/ALTERNATES/s298/Pokemon-charmander.png"></img>
        </a>
    </div>
    <div class="portfolio_item">
        <a href="#">
            <img src="http://i1.mirror.co.uk/incoming/article7731571.ece/ALTERNATES/s298/Pokemon-charmander.png"></img>
        </a>
    </div>
</div>

​