Question

我想让一行图片保持在一行内，而不是使用overflow：roll;但无论我做什么，这些物品都会继续在彼此之下。

<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代替浮点数。而且容器上也不需要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

而不是在float: left课程中使用portfolio_item使用display: inline-block来对齐您的图片

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

让图片向侧面滚动

2 个答案: