Question

这是一个显示我需要的网站：kelseymcclellan.com

但它不在CSS中。

这是一个仅使用CSS的网站：olivercurtisphotography.co.uk

但有几个限制：
- 图像嵌入为img
- 画廊的宽度必须在px中指定

相反，我需要
- 图像是div
- 图库可以独立适应图像的数量

这是我嵌入图片的方式：

HTML:

<div class="img ratio" style="background-image: url(image.jpg);"></div>


CSS:

.img {
background-size: cover;
}

.ratio:after {
content: '';
display: inline-block;
padding-top: 66.6666667%;
}

我找到了许多能够达到类似于我所需要的答案的答案，但它们都不够接近。

如何创建一系列div水平滚动？

Answer 1

您可以使用flexbox。请检查以下代码：

＆＃13;

#container{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.img{
  flex: 0 0 auto;
}

＆＃13;

<div id="container">
  <div class="img">
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg">
  </div>
  <div class="img">
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg">
  </div>
  <div class="img">
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg">
  </div>
  <div class="img">
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg">
  </div>
  <div class="img">
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg">
  </div>
</div>

＆＃13;

Answer 2

如果将容器div包裹在图像div周围，则可以将容器div的宽度设置为所有图像div的宽度。

在下面的代码段中，如您所见，我将.img div设置为200px，并给了它们margin-right: 10px。由于我有10张图片，因此我可以将div容器的宽度设置为calc(210px * 10)（210px来自图片div的宽度加上边距，而10来自于图片）。

还必须在容器div上设置font-size: 0。如果没有此设置，则图像之间会存在一些无意的空白，从而破坏了容器div完美计算出的宽度。

查看示例：

.img-container {
  width: calc(210px * 10);
  font-size: 0;
}

.img {
  width: 200px;
  height: 100px;
  display: inline-block;
  margin-right: 10px;
}

<div class="img-container">
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
</div>

编辑：我刚刚注意到您的要求，未明确设置宽度。您可以将容器div宽度设置为max-content来实现。见下文：

.img-container {
  width: max-content;
  font-size: 0;
}

.img {
  width: 200px;
  height: 100px;
  display: inline-block;
  margin-right: 10px;
}

<div class="img-container">
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
  <div class="img ratio" style="background-image: url('http://placekitten.com/200/100');"></div>
</div>

完全公开，max-width属性doesn't appear to be supported in IE or Edge。

水平滚动图库 - 仅限CSS

2 个答案: