即使使用clearfix，高度自动也不起作用

Question

可能不是你第一次看到这个问题......但我无法解决这个问题。

这是现场版  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;
}

Answer 1

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

如果您希望显示所有三个徽标，请将图片的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/

修改

对于其他三个（隐藏）图像，我已经从使用背景图像更改为使用您用于超人徽标的相同100％宽度方法。我通过绝对定位将链接放在图像上。

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

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

修改

我想我现在明白你要去做什么 我使用background-image上的.inner切换为使用<img />并保持您的元素绝对定位。那会更好吗？

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