Question

我有一些包含图片的链接标记：

<div id="product-pics">
    <a href="#"><div class="overlay"><span>meer ></span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer ></span></div><img src="img/dummy/566x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer ></span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer ></span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer ></span></div><img src="img/dummy/282x566.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer ></span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer ></span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer ></span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer ></span></div><img src="img/dummy/566x282.png" alt="" class="tile" /></a>
</div>

它们浮动到左侧，并用砌体（jquery插件）形成网格。

.tile {
    margin: 1px;
    float: left;
}

我正在尝试为图像创建叠加层，但它只是跨度的大小，而不是我在css中给出的大小。因此叠加层不起作用，我该如何解决这个问题？

Answer 1

试试这个

.overlay span {display:inline-block; width:your input; height:your input}

Answer 2

您需要使用display:inline-block样式作为链接。

以下是整个HTML：

<html>
<head>   
<style>
#product-pics a {
  display: inline-block;
}
#product-pics .overlay {
  position: absolute;
}
/* below style can be omitted, but the "product-pics" contents layout
   won't be properly displayed until the image dimensions are known */
#product-pics img {
  min-width: 282px;
  min-height: 282px;
}
</style>
</head>
<body>
<div id="product-pics">
    <a href="#"><div class="overlay"><span>meer1</span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer2</span></div><img src="img/dummy/566x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer3</span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer4</span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer5</span></div><img src="img/dummy/282x566.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer6</span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer7</span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer8</span></div><img src="img/dummy/282x282.png" alt="" class="tile" /></a>
    <a href="#"><div class="overlay"><span>meer9</span></div><img src="img/dummy/566x282.png" alt="" class="tile" /></a>
</div>
</body>
</html>

链接标记没有获得子图像的尺寸

2 个答案: