0

画像を含むリンク タグがいくつかあります。

<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 で指定したサイズではなく、スパンのサイズです。オーバーレイが機能していません。どうすれば修正できますか?

4

2 に答える 2

0

これを試して

.overlay span {display:inline-block; width:your input; height:your input}
于 2012-09-04T14:10:50.410 に答える
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 に答える