CSS / jQuery图像网格布局

Question

I have read many threads about image grid layouts using jQuery or even sole CSS, but mine is a little bit different to what I have read as they are mainly using columns with differing widths.

I am also purposely not pasting any code at this point due to the fact that I have tried various different methods that my code seems no longer 'nice'.

As you can see from this page: http://tinyurl.com/poxn4un - what I am trying to acheive is the images (in Our Work section) laid out how they are now but with the bottom two slotting nicely between the two edge images.

I have tried masonry with no success and also tried flexbox which is what is it in use at this point. Any help would be appreciated as this is something I wish to learn for other projects.

Thanks, Adrian

Answer 1

You could use a flex-box combination layout for this.

Here's an example:

JSFiddle example

And here's the CSS and HTML powering it:

 * { box-sizing: border-box; } .bricks { display: flex; height: 450px; flex-direction: row; } .bricks > * { border: solid 1px #222; } .sidebar { flex: 0 0 220px; background-image: url(https://placehold.it/220x450/075883); } .center-contain { flex: 0 0 402px; font-size: 0; } .center { display: inline-block; background-image: url(https://placehold.it/200x225); border: solid 1px #e5e5e5; height: 225px; } .center.m { width: 200px; } .center.lg { width: 300px; } .center.sm { width: 100px; } 

 <div class='bricks'> <div class='sidebar sidebar-left'></div> <div class='center-contain'> <div class='center sm'></div> <div class='center lg'></div> <div class='center m'></div> <div class='center m'></div> </div> <div class='sidebar sidebar-right'></div> </div>