問題描述

/*---仿-table---*/.flex-out{ /*display: -webkit-box;*/ /*放在第一行不能適應電腦游覽器，手機無問題。*/ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */}.flex-in{ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }<p class='flex-out'> <p style='width:46%;'> <img src='http://cca.mbaobao.com/mbaobao/201410/09/qj_04.jpg' > <img src='http://cca.mbaobao.com/mbaobao/201410/09/qj_06.jpg' > </p> <p style='width:54%;'><img src='http://cca.mbaobao.com/mbaobao/201410/09/qj_05.jpg' > </p></p>

代碼如上,需求很簡單只要讓上面的這組p能實現table的效果就好；讓手機能實現適應多種屏幕的大小，圖片被設置成了100%；

出現的問題在于pc的游覽器和手機游覽器顯示效果不同，但是把 display: -webkit-box; 移動到最后一行是無問題的。我知道為什么這樣可行，但是我不知道這樣修改后會不會引發別的什么問題（經過測試是沒問題的），但是感覺樣式還是怪怪的。希望誰能回答下我的幾個問題

問題解答

display：flex; 是一種 CSS3 屬性，用于多行多列布局，類似 table，但是有更大的靈活性。目前移動端只有最新的瀏覽器支持，如 Chrome、Firefox等。Android 4.1 的內置瀏覽器不支持，微信瀏覽器使用的 WebView 等都只有在最新的系統上才支持，如 4.3、4.4 等，具體細節你可以再去確定。

display: -webkit-box;是一種特別適合微信內置瀏覽器的布局方式。

移到最后一行沒有問題，是因為這時候 display: -webkit-box; 會把前面的 display: flex; 覆蓋掉。