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

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

<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

Answer 2

其实很简单，请查看以下内容：

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
}

如何对齐两行图像

2 个答案: