div后面的隐藏按钮仅显示提示

Question

在网站上，我有一个项目列表。 这些项目中的每一项都有一张图片或一个名称，我将其添加到<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>标签后面。 这些项目放在行中，每行有三个项目，我将在每个页面中显示六个项目。 每行将以<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）。

Answer 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的位置是：relative;
   div.more-info 位于文章内部 ， 位置：绝对；

   这样，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(); });