Как выровнять две строки изображений

Question

Итак, у меня есть эти две строки div с изображениями jsfiddle Вы можете видеть, что слева они выровнены, а справа при изменении размера верхнего или нижнего окна будут торчать. И я хочу, чтобы они были выровнены с обеих сторон. Как это исправить?

<div class="latest_wrapper"> 
    <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Men"></div> 
    <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Women"></div> 
    <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Watches"></div> 
    <div class="latest_item bigger"><img src="http://31.media.tumblr.com/565b1f797c19420c4d5b89de430751cb/tumblr_inline_nilvxaeMRt1rzpxo3.jpg" alt="40 % off"></div> 
    <div class="latest_item bigger"><img src="http://31.media.tumblr.com/565b1f797c19420c4d5b89de430751cb/tumblr_inline_nilvxaeMRt1rzpxo3.jpg" alt="Sales"></div> 
</div> 



.latest_wrapper { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-around; 
} 

img { 
    max-width: 100%; 
    height: auto; 
} 
.bigger { 
    width: 45%; 
    margin-right: 5%; 
} 
.bigger:last-child { 
    margin-right: 0; 
} 

Answer 1

На самом деле это очень просто делать, проверьте ниже:

HTML:

<div id="imagesDIV"> 
    <img src="myimage1.jpg" alt=""/> 
    <img src="myimage2.jpg" alt=""/> 
    <img src="myimage3.jpg" alt=""/> 
    <img src="myimage4.jpg" alt=""/> 
    . 
    . 
    . 
</div> 

CSS:

#imagesDIV { 
    width: 960px; // standar width for a webpage 
    height: auto; 
    overflow: hidden; 
} 

#imagesDIV img { 
    display: inline; 
    margin: 0 20px; // 0px on top and 20px on the sides 
} 

Answer 2

Вы можете плавать с правыми большинством элементов на оба строках:

<div class="latest_wrapper"> 
    <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Men"></div> 
    <div class="break"></div> 
<div class="latest_item" style="text-align:center;"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Women"></div><div class="break"> 
</div> 
    <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Watches" style="float:right;"></div> 
    <div class="latest_item bigger"><img src="http://31.media.tumblr.com/565b1f797c19420c4d5b89de430751cb/tumblr_inline_nilvxaeMRt1rzpxo3.jpg" alt="40 % off"></div> 
    <div class="latest_item bigger"><img src="http://31.media.tumblr.com/565b1f797c19420c4d5b89de430751cb/tumblr_inline_nilvxaeMRt1rzpxo3.jpg" alt="Sales" style="float:right;"></div> 
</div> 

Важно отметить, что укладка напрямую была введена в HTML. Я не знаю, что идентификаторы вы хотите, чтобы дать им, так что я держал его встроенный в HTML

И в CSS:

.latest_wrapper { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-around; 
} 

.latest_item {width: 33%;} 

img { 
    max-width: 100%; 
    height: auto; 
} 

.bigger { 
    width: 50%; 
} 

.break{ 
    clear:both; 
} 

Смотрите скрипку: JSFiddle