0

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

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

4

1 回答 1

0

问题在于教程中的第 9 步

#container li { 
        float:left; 
 }

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

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

2.定义一个类

.clear {
      clear:both;
}

并将 <div class="clear"> 放在容器的结束标记之前

3.使用伪选择器:after

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

将 <div id="container"> ... 更改为 <div id="container" class="clearfix">

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

于 2012-07-04T08:53:05.310 回答