如何在div里面force/wrap<img>？

Question

我有一个包装器，其中包含一堆带有 fancybox 的照片库的缩略图。

<div class="wrapper">
    <a href><img thumbnail></a>
    <a href><img thumbnail></a>
    <a href><img thumbnail></a>
    ...
</div>

包装器已定义 width。缩略图的数量从 1 到 ... 不等。问题是包装器内的 space 最多只能容纳 7 个缩略图。所以所有超过 7 的缩略图都会显示在外面。我如何存档所有缩略图都将保留在包装器 `' 中，以便所有 7 个都隐藏起来？

非常感谢。

Answer 1

将此 css 添加到您的 .wrapper div

.wrapper {
    overflow:hidden;
}

Answer 2

您可以将 scroll 添加到您的 .wrapper.it 可以通过添加 overflow-x:scroll; 来实现； overflow-y:scroll; 到你的 .wrapper。这将使您的包装纸大小保持不变，并且您可以根据需要添加任何图像。

.wrapper{
  width:300px;
  height:200px;
  overflow-x:scroll;
  overflow-y:scroll;
  background:yellow;
  }
img{
  width:100px;
  height:100px;
  margin:10px;
  }

<div class="wrapper">
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg" thumbnail></a>
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg" thumbnail></a>
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg" thumbnail></a>
<a href><img  src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a>
<a href><img  src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a>
<a href><img  src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a>
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a>
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a>
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a>
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a>
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a>
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a>

</div>

Answer 3

你试过吗

溢出：隐藏！重要；（css）。

如何在div里面force/wrap<img>？

How to force/wrap <img> inside div?

html

css

image

href