0

I have a few link tags that contain images:

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

They are floated to the left and with masonry (jquery plugin) made to form a grid.

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

I'm trying to create an overlay for the image, but it's just the size of the span, not the size i give in css. So the overlay isn't working, how can I fix this ?

4

2 回答 2

0

您需要对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>
于 2012-09-04T17:05:15.420 回答
0

尝试这个

.overlay span {display:inline-block; width:your input; height:your input}
于 2012-09-04T14:10:50.410 回答