html - 如何对齐两行图像

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
}