自适应宽度，左右两栏固定宽度，中间栏优先加载 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    html,body{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
    
    .content{
        width:100%;
        height:100%;
        position:relative;
        background:#000 url(background.jpg) no-repeat;
        overflow:hidden;
    }

    .left{
        width:200px;
        height:100%;
        background:#8CCA12;
        position:absolute;
        z-index:3;
        top:0;
        left:0;
    }
    
    .center-ct{
        height:100%;
        background:#CCCCCC;
        position:absolute;
        z-index:1;
        top:0;
        left:0;
        margin:0;
        width:100%;
    }

    .center{
        margin:0 200px;
    }
    .right{
        width:200px;
        height:100%;
        background:#6600FF;
        position:absolute;
        z-index:2;
        right:0;
        top:0;}
    </style>
</head>
    <body>
        <div class="content">
            <div class="center-ct">
                    <div class="center">
                        center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
                 </div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>
</html>

 

posted @ 2012-04-21 10:46  纳爱斯  阅读(412)  评论(0)  编辑  收藏  举报