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