Question

我想要在我的网页上水平显示一系列图像。我怎样才能在HTML中实现这一目标？令人惊讶的是，搜索此查询似乎让我空手而归。我认为解决方案相当简单直接。

Answer 1

在包含图像的容器div上添加white-space：nowrap

.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使其可滚动：

＆＃13;

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

＆＃13;

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

＆＃13;

创建横向网站

2 个答案: