Question

我遇到了一个非常特殊的情况，我不确定发生了什么。我正在尝试安排我的网页，以便你有一组相同大小的图像，所有图像都以网格形式拼凑在一起 - 这些图像将是文章的链接。

对于我的图片，每个都有代码：

<div class="linkyimage">
    <img src="image/lblue.png" alt"blue" />
         <p class="description">
        Oy oy oy
    </p>
</div>

我的css：

.description{
    background-color:#000;
    position: absolute;

    color:#fff;
    opacity:0;
    top:150px;
    left:10px;
}

.linkyimage{
    position: relative;
    display: inline;
    float: left;
    height: 250px;
    width: 250px; 
    margin:0px;
    white-space:nowrap;
    overflow:hidden;
}   

.linkyimage:hover img{
    opacity:0.5;

}
.linkyimage:hover .description{
    opacity: 1;

}

但这不起作用。它似乎压缩了图像并将它们放入250px平方的容器中，效果确实相当古怪，但描述显示完美。所以我有个主意。也许我只是将它们格式化为图像。我将其更改为

.linkyimage img{
    blah blah
}

这使我的图像显示完美....但现在屏幕的最左侧显示的描述不是像过去那样显示在图像上。

任何人都可以解释这里发生的事情吗？仅仅格式化链接图像的图像（即所有框中包含的内容）如何搞乱框的格式？如果我只格式化容器而不是图像，为什么图像会被压缩并且不会填满整个框？

一切都很奇特。

编辑：

左链接图片保持打开状态： http://jsfiddle.net/28n9p/

只处理了链接图像的图像：

http://jsfiddle.net/XJq5W/

Answer 1

所以你可以看到这个jsFiddle

.description{
    background-color:#000;
    color:#fff;
    height:30px;
    opacity:0;
    position: absolute;
    margin-top: 120px;   
}
.linkyimage img{
    position: relative;
    display: inline;
    float: left;
    height: 150px;
    width: 150px; 
    margin:0px;
    white-space:nowrap;
    overflow:hidden;
}

并将此类添加到您的div ..

.linkyimage{
    margin-right:5px; // optional
    border: 2px solid #000; //optional
    float:left;
}

正确排列图像

1 个答案: