如何在 div 中强制/包装 <img>？答案

【问题标题】：How to force/wrap <img> inside div?如何在 div 中强制/包装 <img>？
【发布时间】：2017-05-02 00:42:54
【问题描述】：

我有一个 Wrapper，其中包含一组带有 fancybox 的照片库的缩略图。

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

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

非常感谢。

【问题讨论】：

标签： html image css href

【解决方案1】：

将此css添加到您的.wrapper div

.wrapper {
    overflow:hidden;
}

【讨论】：

【解决方案2】：

你试过了吗

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

【讨论】：

【解决方案3】：

你可以在你的.wrapper中添加scroll。可以通过添加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>

【讨论】：