我在移动端做一个左右排版用了flex,图片就是自适应的,但是出来的效果这样是怎么回事? <div class="contentlist"> <div class="_left"> <a href="http://m.vmei.com/brand/group/19" target="_blank"> <img src="http://img01.sephome.com/201512/63CED07CABAD4C44B53079C5ABFF8C92.jpg" alt="" width="100%"> </a> </div> <div class="_right"> <a href="http://m.vmei.com/product/5355" target="_blank"> <img src="http://img01.sephome.com/201512/D34E8FD9D59B4B28B7A955D7AEAA5D56.jpg" alt=""> </a> <a href="http://m.vmei.com/product/5761" target="_blank"> <img src="http://img01.sephome.com/201512/A68FCD5B9C5842E38337D29ACAE7C12E.jpg" alt=""> </a> </div> </div> .contentlist{ width: 98%; margin:0.5rem auto; display: flex; display: -webkit-flex; justify-content:space-between; -webkit-justify-content:space-between; }
出来的效果是这样
实际要这样
要怎么破
解决方案
个人理解虽然 space-between;是两端对齐但是如果图片太小撑不起div,是不是就会是上面的那样。
._left{ width: 100%;} ._right{ width: 100%;}img{ width: 100%;}试一下。