Html 如何对齐两行图像

我有两行带图像的div 您可以看到，在左侧，它们对齐，但在右侧，调整窗口大小时，顶部或底部会突出。我希望他们两边都对齐。我怎么修理它

 <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;
}

.最新包装{
显示器：flex；
柔性流：行换行；
证明内容：周围的空间；
}
img{
最大宽度：100%；
高度：自动；
}
.更大{
宽度：45%；
保证金权利：5%；
}
.比格：最后一个孩子{
右边距：0；
}

您可以浮动两行中最右边的元素：

<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>

---

请参见小提琴：

您可以浮动两行中最右边的元素：

<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:

---

这是你要找的吗？这是你要找的吗？

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

#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
}