浮动：左侧没有给我我想要的正确画廊

Question

Currently trying to build a gallery page for a client's website and I've noticed that a simple float:left does not give me what i'm looking for.

What I want is for the images to line up perfectly regardless of their size as the images that I have supplied are all in different sizes.

.gallery img {
    margin:0 !important;
    border:1px solid white;
    width:33%;
    float:left;
}

That's the code that i'm using & the website is responsive.

Answer 1

use height: auto; and max-width: 100%;

.gallery img {
    margin:0 !important;
    border:1px solid white;

    height: auto !important;
    max-width: 100%;
    float:left;
}