css - 如何制作 :hover images scroll with div box

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

要了解 float 的一个重要概念是 clear 属性。因为图像的空间超过了包含 div 的空间，所以图像实际上落在了 div 之外。有几种方法可以解决此问题。阅读此处了解更多信息 http://css-tricks.com/all-about-floats/

1.overflow: auto;就像你已经实现的一样

2.定义一个类

.clear {
      clear:both;
}

并把

放在容器的结束标签之前

3.使用伪选择器:after

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

将

... 更改为

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

关于css - 如何制作 :hover images scroll with div box，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11319925/

上一篇：CSS 固定 div 在列表菜单上

下一篇：CSS 在 IE 8、9 中无法正确呈现

相关文章：

html - li 悬停在导航菜单上

javascript - 如何在CSS中减少一列并增加另一列？

html - 如何自动设置 kramdown 转换器的 HTML 输出样式？

html - 背景定位和附着

jquery - 可编辑的 div 忽略 `\n`

jquery - 为什么升级 jQuery 会破坏 jQuery UI 功能？

javascript - IE 悬停在链接上不起作用

html - padding trick 纵横比元素——垂直居中

css - Div 中的 HTML5 视频背景 - 需要帮助调整到窗口大小

html - Mozilla 无法识别显示 :inline-block inside display:table-cell container