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. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能？3. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化4. 配置Apache時，添加對PHP的支持時語法錯誤5. css - 寫頁面遇到個布局問題，求大佬們幫解答，在線等，急！~6. javascript - nodejs關于進程間發送句柄的一點疑問7. javascript - 移動端上不能實現拖拽布局嗎？8. phpstudy8.1支持win11系統嗎？9. 實現bing搜索工具urlAPI提交10. Apache 已經把網站根目錄的改為allow from all了，但是服務器還是不能訪問？
網公網安備