2

在一个网站上，我有一个项目列表。这些项目中的每一个都有一张图片或一个名称，我将其添加到这样的<article>标签中：

<article class="client-card">
    <p><img width="211" height="106" src="./img/ftm1.png" class="post-image" alt="ftm" title="ftm" /></p>
</article>

这是一个测试的小提琴链接。可能图像不起作用：http: //jsfiddle.net/9wQg3/

在这些图片中的每一张旁边，我想添加一个带有放大镜的按钮，这将是一个按钮。此按钮还将包含文本：“有关此项目的更多信息”，但我只想让放大镜可见，而按钮的其余部分仍隐藏在<article>标签后面。这些项目按行放置，每行有三个项目，我将在每页中显示六个项目。每行都以 a 结尾，<div class="clear"></div>因为每篇文章都是向左浮动的。这是代码：

<article class="client-card">
    <p><img width="211" height="106" src="./img/ftm1.png" class="post-image" alt="ftm" title="ftm" /></p>
</article><div class="more-info"><a href="#">More information</a></div>
<article class="client-card">
    <p><img width="211" height="106" src="./img/fluid.png" class="post-image" alt="ftm" title="ftm" /></p>
</article><div class="more-info"><a href="#">More information</a></div>
<article class="client-card">
    <p><img width="211" height="106" src="./img/chemical.png" class="post-image" alt="ftm" title="ftm" /></p>
</article><div class="more-info"><a href="#">More information</a></div>
<div class="clear"></div>
<article class="client-card">
    <p><img width="211" height="106" src="./img/alcmelgar.png" class="post-image" alt="ftm" title="ftm" /></p>
</article><div class="more-info"><a href="#">More information</a></div>
<article class="client-card">
    <p>COLOMBIAN PRESERVED FLOWERS</p>
</article><div class="more-info"><a href="#">More information</a></div>
<article class="client-card">
    <p><img width="211" height="106" src="./img/fit.png" class="post-image" alt="ftm" title="ftm" /></p>
<div class="clear"></div>

这是我的样式表：

div.client-list article.client-card{
    width: 288px;
    height: 130px;
    background: transparent url(images/bg-client-card.png) no-repeat scroll center;
    float: left;
    margin-left: 24px;
    margin: 20px 0px 0px 24px;
/*  position: relative; */
}
div.client-list article.client-card p{
    line-height: 110px;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: #030303;
    font: normal 14px/110px "FuturaLtBTLight", Arial;
}
div.client-list div.more-info{
    width: 290px;
    height: 24px;
    line-height: 24px;
    background: #ea1571;
    float: left;
    margin: 20px 0px 0px 0px;
    position: relative;
    top: 0px;
    left: -290px;
/*  display: none; */
}

好的，当我使用该代码时，我得到以下结果： 在此处输入图像描述

如您所见，这些行看起来有问题，其中只有 4 个显示“更多信息”链接。我留下了一些用于测试的代码。

我尝试了不同的css替代方案以及插入标签内部，但没有任何效果，你能指出我做错了什么以及如何纠正它吗？（我忘了指出包含 div 的最大宽度是 1000px）。

4

1 回答 1

1

  1. 放置：

    <div class="more-info"><a href="#">More information</a></div>
<a href="#" class="more-info-control">magnyfying glass</a>

    在文章标签内

  2. 在css中修改：

    div.client-list article.client-card{
    position: relative;
}

div.client-list div.more-info{
    width: 290px;
    height: 24px;
    line-height: 24px;
    background: #ea1571;
    position: absolute;
    top: 0px;
    left: -1px;
    display: none;
}

    重要的是 article.client-card 是position: relative;
    div.more-info在文章内并且是position: absolute;

    这样，div.more-info 的 0,0 参考点不是浏览器窗口的左上角，而是最近的父相关元素的左上角（在本例中是 article.client-card）左值可以定位更多信息 div。

  3. 然后，使用 jquery，您可以控制何时显示“更多信息”div（仅示例代码）

    $jq("more-info-control").click(function(event) {
     $jq("div.more-info", $jq(this).parent()).show();
});
于 2012-09-21T09:43:11.790 回答