首页 > 开发 > CSS > 正文

css3:flex排版问题

2017-09-12 09:37:40  来源: 网友分享
我在移动端做一个左右排版用了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%;}试一下。