html - 链接标签未获取子图片的尺寸

我有一些包含图像的链接标签：

<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中给出的大小。因此，覆盖层无法正常工作，该如何解决？

最佳答案

尝试这个

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