首页 > 代码库 > 【技术】移动端box-flex
【技术】移动端box-flex
定义两个可伸缩的 div 元素。
实例见http://www.w3school.com.cn/cssref/pr_box-flex.asp
之前的移动端视图:
<header>
<div class="head">
<div class="head_left fl">
<a href="http://www.mamicode.com/#"><img width=100% src="http://www.mamicode.com/images/logo.png"></a>
</div>
<div class="head_right fr">
<div class="head_right1">
<a href="http://www.mamicode.com/tel:10086"><img width=70% src="http://www.mamicode.com/images/phone.png"></a>
</div>
<div class="head_right2">
<a href="http://www.mamicode.com/#"><img width=70% src="http://www.mamicode.com/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;
}
【技术】移动端box-flex