html - 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>

这是测试的 fiddle 链接。可能图像不起作用: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是position: relative;
   div.more-info 是 inside 文章并且是 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();
   });