css3 display:flex
問題描述
在移動端有三張圖片，其中有兩張的尺寸是一樣的，還有一張要比其它兩張小2px用flex怎么讓他們能自適應??? <p class='flexbox'> <p><a > <img src='http://img01.sephome.com/201512/E99EB7375ADB4E4CB717B30EEF130A61.jpg' alt='' width='100%'></a> </p> <p><a > <img src='http://img01.sephome.com/201512/2221C6D38DCF4E3DB0F6D5F5B4A31D1F.jpg' alt='' width='100%'></a> </p> <p><a > <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;}
問題解答
回答1：不是很明白~~是想讓三張圖片水平放置并平分位置嗎？如果是這樣，只要改成這樣：
.flexbox{ display: flex; display: -moz-box; display: -webkit-flex; } flexbox p{ float: left; flex:1; }回答2：
圖片小2px和flex沒啥關系的。flex應用到容器和每個容器item，圖片只要控制max-width/max-height就行了。
回答3：.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教程。
相關文章：
1. list - python 求助2. linux - Ubuntu下編譯Vim8（+python）無數(shù)次編譯失敗3. python - TypeError: tryMsgcode() takes exactly 2 arguments (0 given)4. javascript - react，獲取radio的值出錯5. css - 移動端 line-height安卓錯位,蘋果機正常用,縮放解決了,可是又出來了占位的問題6. extra沒有加載出來7. javascript - 彈出一個子窗口，操作之后關閉，主窗口會得到相應的響應，例如網(wǎng)站的某些登錄界面，django后臺的管理等，這是怎么實現(xiàn)的呢？8. 環(huán)境搭建 - anaconda 創(chuàng)建python2.7環(huán)境中打開編譯器確是3.6版本9. mysql replace 死鎖10. 求救一下，用新版的phpstudy，數(shù)據(jù)庫過段時間會消失是什么情況？
網(wǎng)公網(wǎng)安備