如何對齊兩行圖像

Question

所以我有這兩行div divs與圖像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是非常重要的。我不知道你想給他們什麼樣的ID，所以我保留了它內嵌到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