CSS3弹性盒模型开发笔记（二）

    <div id="box3">  
        <h2><img src="images/web3_12.gif" /></h2>  
        <div><img src="images/web3_08.gif" /></div>  
        <div><img src="images/web3_09.gif" /></div>  
        <div><img src="images/web3_10.gif" /></div>  
        <div><img src="images/web3_11.gif" /></div>  
    </div>  
</div>  
</body>  

CSS3代码：

CSS Code复制内容到剪贴板

/*这是一个三栏布局的页面，其中左侧栏目的宽度是固定的，而中间和右侧栏目的宽度是弹性的*/  
<style>   
body{   
    margin:0;   
    padding:0;   
    text-align:center;   
}   
h1,h2{margin:2px;}   
#box{   
    margin:auto;   
    text-align:left;   
    width:1002px;   
    overflow:hidden;   
}   
/*定义box元素盒形显示，并设置子元素水平布置*/  
#box{   
    display:box;   
    display:-moz-box;   
    display:-webkit-box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
/*定义盒子左侧栏目的宽度为固定显示*/  
#box1{width:201px;}   
#box2,#box3{   
    border:1px solid #CCC;   
    margin:2px;    
}   
/*定义盒子内中间栏目的宽度为盒子剩余空间的2/3*/  
#box2{   
    box-flex: 4;   
    -moz-box-flex: 4;   
    -webkit-box-flex: 4;   
}   
/*定义盒子内中间栏目的宽度为盒子剩余空间的1/3*/  
#box3{   
    box-flex:2;   
    -moz-box-flex:2;   
    -webkit-box-flex:2;