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. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？2. docker-compose中volumes的問題3. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗！4. docker-machine添加一個已有的docker主機問題5. golang - 用IDE看docker源碼時的小問題6. docker不顯示端口映射呢？7. javascript - 連續點擊觸發mouseleave事件8. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””9. docker內創建jenkins訪問另一個容器下的服務器問題10. mac里的docker如何命令行開啟呢？
網公網安備