[Solved] How to layout images in 3 columns [closed]

by


You can use CSS Flexbox.

CSS

#container-outer {
    display: flex;
}

.container-inner {
    display: flex;
    flex-direction: column;
}

HTML

<div id="container-outer">
    <img src="http://dummyimage.com/600x400/666" height="300" width="200">
    <div class="container-inner">
        <img src="http://dummyimage.com/600x400/333" height="150" width="100">
        <img src="http://dummyimage.com/600x400/f2f" height="150" width="100">
    </div>
    <div class="container-inner">
       <img src="http://dummyimage.com/600x400/ee3" height="150" width="100">
       <img src="http://dummyimage.com/600x400/532" height="150" width="100">
    </div>
</div><!-- end #container-outer -->

DEMO (image dimensions fixed): http://jsfiddle.net/3wbme70k/
DEMO (responsive): http://jsfiddle.net/3wbme70k/1/

4

solved How to layout images in 3 columns [closed]