-2

この質問を見るのは初めてではないかもしれませんが、私にはこの問題を解決できません。

ここにライブバージョンがあります http://jsfiddle.net/LndEh/

の高さを変更する.projectwrapと、私が達成しようとしていることがわかります。clearfixなどを追加してみました。

HTML

<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><a href=""><span>sometext</span></a></div>
</div>

<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><a href=""><span>some text</span></a></div>
</div>

 <div class="projectwrap">
 <img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><a href=""><span>some text</span></a></div>
</div>

CSS

.projectwrap
{
position: relative; 
width: 28%;
height:auto;
float:left;
}
.projectwrap img
{
position: absolute;
width: 100%;
}

.inner
{
width: 100%;
height: 100%;
background-image: url(http://goodlogo.com/images/logos/batman_logo_2574.gif);
background-size: cover;
position:absolute;
z-index: 11;
opacity: 0;
-webkit-transition: opacity 400ms linear;
-o-transition: opacity 400ms linear;
-moz-transition: opacity 400ms linear;
transition: opacity 400ms linear;
}
.inner a
{
float:left;
text-align: center;
display:table;
width: 100%;
height:100%;
}
.inner a span
{
display: table-cell;
vertical-align: middle;
width:100%;
height:100%;
color:#fff;
text-align: center;
text-transform: uppercase;
}
.inner:hover
{
opacity: 1;
-webkit-transition: opacity 400ms linear;
-o-transition: opacity 400ms linear;
-moz-transition: opacity 400ms linear;
transition: opacity 400ms linear;
}
4

1 に答える 1

2

コンテナーはフロートされ、絶対位置の画像が含まれているため、高さがなく、互いにフロートします。

3 つのロゴすべてを表示する場合は、画像の CSS を次のように変更します。position:relative

.projectwrap img {
    position: relative;
    width: 100%;
}

http://jsfiddle.net/LndEh/1/

編集：

画像で使用する必要がある場合は、別の方法position:absolute：

.projectwrap高さがゼロにならないように、divの最小の高さを設定します。
その後、期待どおりに浮きます。

.projectwrap {
    position: relative;
    width:28%;
    float:left;
    min-height:5px;height:auto!important;height:5px;
}

http://jsfiddle.net/LndEh/2/

編集：

追加の 3 つの (非表示の) 画像については、背景画像を使用する方法から、スーパーマンのロゴに使用したのと同じ 100% 幅の方法を使用する方法に変更しました。画像の上にリンクを絶対に配置して配置しました。

.inner {
    position:relative;
    width: 100%;
    ...
}
.inner a {
    position:absolute;
    ...
}

http://jsfiddle.net/LndEh/3/

編集：

私は今、あなたが何をしようとしているのかを見ていると思います。使用から使用に
切り替え、要素を絶対に配置しました。その方がうまくいきますか？background-image.inner<img />

http://jsfiddle.net/LndEh/7/

于 2013-09-03T17:24:53.983 に答える