Question

我有一个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的缩略图都将显示在外面。如何归档所有缩略图将保留在包装器内？＆＃39;所以7个以上都是隐藏的？

非常感谢。

Answer 1

将此css添加到您的.wrapper div

.wrapper {
    overflow:hidden;
}

Answer 2

你有没有尝试过

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

Answer 3

你可以添加滚动到你的.wrapper.it可以通过添加 overflow-x：scroll;来实现。 overflow-y：滚动; 到你的.wrapper。这将保持您的包装大小相同，您可以根据需要添加任何图像。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: