1

需要帮助获取包装器 div 中的列表。此外,我作为“项目”的图像宽度略有不同,无论哪种方式我都觉得有解决方案,但是,我似乎无法找到它。如果有人知道淡化悬停效果的更简单代码,那可能是最简单的。jquery 在这里非常好,只是定位有问题。谢谢!

这是到目前为止的样子 - http://marisareviewsfilms.com/demo

这就是我想要的样子 - http://marisareviewsfilms.com/lisa#

我的 CSS(边框现在只是为了指导我):

#wrapper {
width: 827px;
height: 577px;
padding: 0px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
border: 1px solid blue;
}

.gallery li {
float: left;
margin-left: 0px;
margin-right:0px;
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
height: 577px;
display: ;
width: 129px;
position: relative;
border: 1px solid green;
}

img.grey {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.color {
position: absolute;
left: 0; 
top: 0;
}
4

3 回答 3

2

您的代码似乎很好。但是,浏览器默认设置会影响定位。

只需更改以下内容

  1. 在 css 的开头应用一个reset css
  2. clearfix类添加到ul.gallery

更新

您使用的图像切片是131px,除了第一个和最后一个(148px分别是151px)。
所以在 CSS 中改变它:

.gallery li {
    width: 131px;
}
.gallery li:first-child {
    width: 148px;
}
.gallery li:last-child {
    width: 151px;
}

但是,这适用于所有现代浏览器。
如果您想支持IE7,8,请将类添加到 first 和 last li,然后相应地放置 css(如上)。

<li class="first">
...
<li class="last">

注意:请删除绿色/蓝色边框,因为它们每个都需要 1px 宽度。

于 2013-01-04T10:52:43.303 回答
0

这里有几件事可以帮助您:

首先,如果将 margin: 0 和 padding: 0 添加到 .gallery,它会将其放置在包装器中。

其次,我会改变您导出图像的方式。弯曲的深色背景应该是 ul 的一部分,您可以在 css/图像中创建它。

然后,导出每列彩色块(具有透明背景),并按照您现在所做的方式定位它们。

这样做会少很多问题。

于 2013-01-04T10:54:48.760 回答
0

在某些浏览器中<ul>.gallery此处)有 40px padding-left,您可以使用css 重置
来纠正它

或者通过写作

ul.gallery{
  padding-left:0;
}
于 2013-01-04T10:55:55.887 回答