您的位置：首页 > 其它

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

2014-07-04 21:49 567 查看 
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXX
</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航