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 modify：

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

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

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

   $jq("more-info-control").click(function(event) {
        $jq("div.more-info", $jq(this).parent()).show();
   });