-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

由于容器是浮动的并且包含绝对定位的图像，因此它们没有高度并且会相互浮动。

如果您希望所有三个徽标都出现，请将图像的 CSS 更改为position:relative

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

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

编辑：

另一种方法，如果您需要position:absolute在图像上使用：

为 div 设置一个最小高度，.projectwrap这样它们就不会折叠到零高度。
然后它们将按预期浮动。

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

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

编辑：

对于另外三个（隐藏）图像，我已从使用背景图像更改为使用与超人徽标相同的 100% 宽度方法。我通过绝对定位它们将链接放置在图像上。

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

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

编辑：

我想我现在明白你要做什么了。
我从 using 切换background-image到.innerusing<img />并保持您的元素绝对定位。这样效果更好吗？

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

于 2013-09-03T17:24:53.983 回答