CSS image grid without clear columns

问题

A client asked me to fix their image grid CSS. While I thought they just screwed around to much with the HTML for it to function properly it seems the problem is a bit more technical then I initially thought.

Because I cannot think of the right keywords google isn't much help either.

My problem is this:

the banners are png's. And as you might figure, the bottom 3x1 banner should align to the bottom of the other 3x1 banner.

This isn't really a problem if I'm working with columns (in this case 2), but I that's not the case. Since sometimes an image takes on a width of multiple columns, there is no clear line in between.

HTML:

<div class="page-banners grid-container">
        <div class="grid12-6 banner">
                <img src="3x1.png" />
        </div>
        <div class="grid12-6 banner">
                <img src="3x2.png" />
        </div>
        <div class="grid12-6 banner">
                <img src="3x1.png" />
        </div>
</div>

CSS:

.grid12-6 {
    width: 48%;
}
.grid12-1, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid-full, .grid-col2-sidebar, .grid-col2-main {
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
}

Changing

float:left;

display:inline-block;

doesn't do the trick, it just makes the first 3x1 banner vertically align to the baseline of 3x2.

The answer is probably fairly simple. But I've spend way to much time staring at it.

Below is an example (made in excel) for the page could 'look' like if all the images were inserted. Each color as a placeholder for a banner.

Basically, this is what I want, but without the javascript. http://desandro.github.io/masonry/demos/basic-multi-column.html

回答1:

It should be enough to put the images together into one column, havent tried it

<div class="page-banners grid-container">
    <div class="grid12-6 banner">
        <img src="3x1.png" />
        <img src="3x1.png" />
    </div>
    <div class="grid12-6 banner">
        <img src="3x2.png" />
    </div>
</div>

you might need to adjust the space between them

回答2:

It's hard to say as you are not giving us the real example of use but try setting the height on the banners as the lowest heigt and the inages will overflow naturaly like so:

.banner{height:100px}

http://fiddle.jshell.net/gndLuqqy/

来源：https://stackoverflow.com/questions/29005831/css-image-grid-without-clear-columns

标签

html

css

grid

masonry