所以我有这两行带有图像的 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;
}
最佳答案
其实做起来很简单,看下面:
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
}
关于html - 如何对齐两行图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35850352/