Question

alite所以我使用了这个网站的教程：http://www.webreference.com/programming/css_gallery/index.html

问题是，当我添加更多图像时，右侧的画廊掉出了div边缘。解决这个问题我使用overflow：auto。现在当有更多图像时，我可以向下滚动我的div。问题是当我将鼠标悬停在div的顶部时显示的图像。所以当我向下滚动太多时，图像要么从顶部切出，要么根本没有出现。所以它就像在这个页面上一样。如果您向下滚动此页面足够远，除非您向上滚动，否则不会再看到此帖子。是否有一个css代码，我可以用来解决这个问题。基本上我想要的是一个位置：在div框中用悬停的东西固定效果。那么如何编辑教程代码呢？

Answer 1

问题在于教程

中的第9步

#container li { 
        float:left; 
 }

使用浮动知道的一个重要概念是清除属性。因为图像的空间超过了包含div的空间，所以图像有效地从div中掉出来。有几种方法可以解决此问题。请阅读此处了解更多http://css-tricks.com/all-about-floats/

1. overflow: auto;就像你已经实施了

2.定义一个类

.clear {
      clear:both;
}

并将＆lt; div class =“clear”＆gt;就在容器的结束标记之前

3.使用伪选择器：在

之后

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

更改＆lt; div id =“container”＆gt; ...到＆lt; div id =“container”class =“clearfix”＆gt;

就个人而言，我更喜欢方法3，因为它使标记更清晰。请注意方法3的浏览器兼容性。

如何制作：悬停图片滚动与div框

1 个答案: