search

Home  >  Q&A  >  body text

html - 手机前端开发

/*---仿-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 class="flex-in" style="width:46%;">          
        <img src="http://cca.mbaobao.com/mbaobao/201410/09/qj_04.jpg" width="100%" >               
        <img src="http://cca.mbaobao.com/mbaobao/201410/09/qj_06.jpg" width="100%" >        
    </p>
    <p class="flex-in" style="width:54%;">
        <img src="http://cca.mbaobao.com/mbaobao/201410/09/qj_05.jpg" width="100%" >
    </p>
</p>

代码如上,需求很简单只要让上面的这组p能实现table的效果就好；让手机能实现适应多种屏幕的大小，图片被设置成了100%；

出现的问题在于pc的游览器和手机游览器显示效果不同，但是把 display: -webkit-box; 移动到最后一行是无问题的。
我知道为什么这样可行，但是我不知道这样修改后会不会引发别的什么问题（经过测试是没问题的），但是感觉样式还是怪怪的。希望谁能回答下我的几个问题

怪我咯怪我咯2874 days ago583

reply all(1)I'll reply

  • 黄舟

    黄舟2017-04-17 11:08:13

    1. display：flex; is a CSS3 property used for multi-row and multi-column layout, similar to table, but with greater flexibility. Currently, the mobile version is only supported by the latest browsers, such as Chrome, Firefox, etc. The built-in browser of Android 4.1 does not support it. The WebView used by WeChat browser is only supported on the latest systems, such as 4.3, 4.4, etc. You can confirm the specific details.

    2. display: -webkit-box; is a layout method that is particularly suitable for WeChat’s built-in browser.

      3. There is no problem moving

    3. to the last line, because at this time display: -webkit-box; will overwrite the previous display: flex;.

    reply
    0
  • Cancelreply