创建横向网站

Question

我有一系列的图像，我想要被显示在我的网页水平。如何在HTML中实现这一点？令人惊讶的是，搜索这个查询似乎让我空手而归。我认为解决办法将是相当简单和直接的。

Answer 1

在保存图像的容器div上添加空白：

小提琴

​

.container {
  white-space: nowrap;
  border: 1px solid tomato;
  overflow: auto;
}
.container div {
  width: 100px;
  height: 200px;
  background: url(http://placehold.it/100x200) no-repeat;
  display: inline-block;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

​

Answer 2

使用white-space:nowrap将图像放置在块中以停止包装，并使用overflow:auto使其可滚动：

​

#images {white-space:nowrap; overflow:auto;}
#images img {width:180px; height:180px;}

<div id="images">
    <img src="" alt="1" />
    <img src="" alt="2" />
    <img src="" alt="3" />
    <img src="" alt="4" />
    <img src="" alt="5" />
    <img src="" alt="6" />
    <img src="" alt="7" />
    <img src="" alt="8" />
    <img src="" alt="9" />
    <img src="" alt="10" />
    <img src="" alt="11" />
    <img src="" alt="12" />
    <img src="" alt="13" />
    <img src="" alt="14" />
</div>

​