在移动端有三张图片,其中有两张的尺寸是一样的,还有一张要比其它两张小2px
用flex怎么让他们能自适应???
<p class="flexbox">
<p>
<a href="http://m.vmei.com/brand/group/1000284">
<img src="http://img01.sephome.com/201512/E99EB7375ADB4E4CB717B30EEF130A61.jpg" alt="" width="100%">
</a>
</p>
<p>
<a href="http://m.vmei.com/brand/group/1000284">
<img src="http://img01.sephome.com/201512/2221C6D38DCF4E3DB0F6D5F5B4A31D1F.jpg" alt="" width="100%">
</a>
</p>
<p>
<a href="http://m.vmei.com/brand/group/1000421">
<img src="http://img01.sephome.com/201512/975A099F4CDE42FAAD13FD89002341A0.jpg" alt="" width="100%">
</a>
</p>
</p>
.flexbox{
display: flex;
display: -moz-box;
display: -webkit-flex;
}
.flexbox p{
float: left;
}
.flexbox p:nth-of-type(1),.flexbox p:nth-of-type(3){
flex:1;
}
阿神2017-04-17 11:31:06
I don’t quite understand~~ Do you want the three pictures to be placed horizontally and equally divided?
If so, just change it to this:
.flexbox{
display: flex;
display: -moz-box;
display: -webkit-flex;
}
flexbox p{
float: left;
flex:1;
}
ringa_lee2017-04-17 11:31:06
The 2px size of the image has nothing to do with flex.
Flex is applied to the container and each container item. The image only needs to control max-width/max-height.
高洛峰2017-04-17 11:31:06
.flexbox{
display: -webkit-flex;
display:flex
}
.flexbox p{
-webkit-flex:1;
flex:1;
}
.flexbox p:nth-of-type(3){
padding-left:2px;
}
flex does not require float. It is recommended to read the flex tutorial of teacher Ruan Yifeng.