css3 display:flex
PHP中文网
PHP中文网 2017-04-17 11:29:06
0
3
591
在移动端有三张图片,其中有两张的尺寸是一样的,还有一张要比其它两张小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;
        }
PHP中文网
PHP中文网

认证0级讲师

répondre à tous(3)
阿神

不是很明白~~是想让三张图片水平放置并平分位置吗?
如果是这样,只要改成这样:

.flexbox{
      display: flex;
      display: -moz-box;
      display: -webkit-flex;
 }
  flexbox p{
      float: left;
      flex:1;
 }
左手右手慢动作

图片小2px和flex没啥关系的。
flex应用到容器和每个容器item,图片只要控制max-width/max-height就行了。

小葫芦
.flexbox{ 
   display: -webkit-flex;
   display:flex
 } 
.flexbox p{
 -webkit-flex:1;
 flex:1;
} 
.flexbox p:nth-of-type(3){
 padding-left:2px;
}

flex是不需要float的,建议看看阮一峰老师的flex教程。

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!