【技术】移动端box-flex

定义两个可伸缩的 div 元素。

实例见http://www.w3school.com.cn/cssref/pr_box-flex.asp

之前的移动端视图：

　　<header>
            <div class="head">
                <div class="head_left fl">
                    <a href="#"><img width=100% src="images/logo.png"></a>
                </div>

                <div class="head_right fr">
                    <div class="head_right1">
                        <a href="tel:10086"><img width=70% src="images/phone.png"></a>
                    </div>
                    <div class="head_right2">
                        <a href="#"><img width=70% src="images/navbg.png"></a>
                    </div>
                </div>

                <div class="clear"></div>
                
            </div>
      </header>

body {
    font-size: 62.5%;
    color: #4F4F4F;
    background: none repeat scroll 0% 0% #FFFFFF;
}

img{
    max-width: 100%;
    border: 0px none;
}

.head{
    padding: 25px 15px 0px;
}
.head_right1{
    padding-right: 5px;
    vertical-align: middle;
}
.head_right2{
    padding-left: 10px;
}

 

之后的移动端视图：

body {
    font-size: 62.5%;
    color: #4F4F4F;
    background: none repeat scroll 0% 0% #FFFFFF;
}

img{
    max-width: 100%;
    border: 0px none;
}

.head{
    padding: 25px 15px 0px;
}
.head_right{
    display:-moz-box; /* Firefox */
    display:-webkit-box; /* Safari and Chrome */
    display:box;
}
.head_right1{
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    box-flex:1.0;
    padding-right: 5px;
    vertical-align: middle;
}
.head_right2{
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    box-flex:1.0;
    padding-left: 10px;
}