码迷,mamicode.com
首页 > 移动开发 > 详细

【技术】移动端box-flex

时间:2014-08-27 16:30:17      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:blog   http   color   ar   2014   div   log   sp   on   

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

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

之前的移动端视图:

bubuko.com,布布扣

  <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;
}

 

之后的移动端视图:

bubuko.com,布布扣

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

标签:blog   http   color   ar   2014   div   log   sp   on   

原文地址:http://www.cnblogs.com/ybingbing_1213/p/3939520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!