2

I've come across a very peculiar situation and I'm not sure what is happening. I'm trying to arrange my web page so that you have a collection of same sized images all squished together in a grid sort of pattern- these images will be links to articles.

For my images each has the code:

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

And my 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;

}

But this doesn't work. It seems to squish the images down and put them in containers that are 250px squared, the effect is really rather bizzare, however the descriptions display perfectly. So I had an idea. Maybe I just format them as images. I change it to

.linkyimage img{
    blah blah
}

This makes my images display perfectly....but now the descriptions display off on the far left of the screen rather than over the images like they used to.

Can anyone explain what is actually happening here? How does merely formatting the images of linky image (thats all the boxes contain) mess up the formatting of the box? Why do the images get compressed and not fill the entire box if I only format their container and not the images?

All rather peculiar.

Edit:

With linky image left open: http://jsfiddle.net/28n9p/

With just linky image's images handled:

http://jsfiddle.net/XJq5W/

4

1 回答 1

0

所以你可以看到这个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;
}
于 2013-05-26T10:43:22.800 回答