Image gallery / float issue

jenfmg Published at Dev

jenfmg

I'm having a bit of trouble getting an image gallery to act the way I want it to. The photos are stacking on top of each other, rather than sitting side by side. I tried to use the float property, but I think I'm doing it wrong. Any help would be much appreciated, thank you!

HTML:

<div class="gallery">

    <img src="art/abstract.jpg"><div class"gallery">Abstract Painting</div>

    <img src="art/graphite.jpg"><div class"gallery">Graphite Drawing</div>...

CSS:

.gallery img {
    display:inline-block;
    width:350px;
    height:350px;
    margin:2px;
    float:left;
    padding-bottom:10px;
    padding-left:5px;
}

.gallery {
    float:left;
    text-align:center;
}

Keammoort

Just use extra div (with class .wrapper below) to wrap image with it's description an then float it:

<div class="gallery">
    <div class="wrapper"><img src="art/abstract.jpg"/><div class"gallery">Abstract Painting</div></div>
    <div class="wrapper"><img src="art/graphite.jpg"/><div class"gallery">Graphite Drawing</div></div>
</div>

.wrapper {
    float: left;
}

jsfiddle

Also I think you can remove these styles:

.gallery img {
    display:inline-block;
    float:left;
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-20

Comments

0 comments

From Dev