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

最新推荐文章于 2021-10-31 23:18:24 发布

xuxianmei

最新推荐文章于 2021-10-31 23:18:24 发布

阅读量820

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/tlxxm/article/details/36928647

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!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>