21、实例使用盒模型布局之自适应窗口的弹性盒布局+改变显示顺序

来源：互联网发布：里约奥运会数据编辑：程序博客网时间：2024/05/18 10:16

<!doctype html><html><head><meta charset="utf-8"><title>使用盒模型布局之自适应窗口的弹性盒布局+改变显示顺序</title><style type="text/css">/*主要属性：box-flex;-moz-box-ordinal-group-webkit-box-ordinal-group*/body{    margin:0px;    }div#container{    display:box;    display:-moz-box;    display:-webkit-box;    text-align:left;}#left{        border:1px solid #aaf;    width:280px;    padding:20px;    background-color:orange;    -moz-box-ordinal-group:2;    -webkit-box-ordinal-group:2;        /*设置HTML组件的WIDTH属性包括边框*/    box-sizing:border-box;    -moz-box-sizing:border-box;    border-radius:12px 12px 0px 0px;}#contents{    /*    width:200px;*//*使用自适应分配余下空间，全部给contents*/    -moz-box-flex:1;    -webkit-box-flex:1;    -moz-box-ordinal-group:1;    -webkit-box-ordinal-group:1;    border:1px solid #aaf;    padding:20px;    border:1px solid #aaf;        /*设置HTML组件的WIDTH属性包括边框*/    box-sizing:border-box;    -moz-box-sizing:border-box;    border-radius:12px 12px 0px 0px;    }#right{    border:1px solid #aaf;    width:200px;    padding:20px;    background-color:orange;        -moz-box-ordinal-group:3;    -webkit-box-ordinal-group:3;        /*设置HTML组件的WIDTH属性包括边框*/    box-sizing:border-box;    -moz-box-sizing:border-box;    border-radius:12px 12px 0px 0px;    }</style></head><body><div style="margin:auto; text-align:center;"><div id="container"><div id="left" style="width:220px;"><h2>XXXXXXXXXXXXX</h2><ul><li>XXXXXXXXXXXX</li><li>XXXXXXXXXXXX</li></ul></div><div id="contents" style="width:800px;"><h2>XXXXXXXXXXXXXXX</h2>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div><div id="right" style="width:240px;"><h2>XXXXXXXXXXXXX</h2><ul><li>XXXXXXXXXXXX</li><li>XXXXXXXXXXXX</li><li>XXXXXXXXXXXX</li><li>XXXXXXXXXXXX</li></ul></div></div></div>

0 0

21、实例 使用盒模型布局之自适应窗口的弹性盒布局+改变显示顺序

21、实例使用盒模型布局之自适应窗口的弹性盒布局+改变显示顺序