css div 布局（左右固定，中间自动大小）

<!DOCTYPE html>
<html lang="zh">
    
    <head>
        <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
        <meta name="viewport" content="width=device-width" />
        <title>布局</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <style type="text/css">
            body {
                font-family: Verdana, Arial;
                margin: 0;
                font-size: 12px;
            }
            
            div {
                background-color: #eee;
                border: dotted 1px green;
                text-align:center;
            }

            #dyleft {
                float: left;
                width: 200px;
                height:200px;
                margin-left:20px;
                line-height:200px;
            }
            #dycenter {
                margin: 0 210px;
                height:200px;
                line-height:200px;
            }
            #dyright {
                float: right;
                height:200px;
                line-height:200px;
                width: 200px;
                margin-right:20px;
            }
        </style>
    </head>
    
    <body>
        <div id="mainbody">
            <div id="dyleft">div左栏固定宽度为200px</div>
            <div id="dyright">div右栏固定宽度为200px</div>
            <div id="dycenter">div中间自适应宽度</div>
        </div>
    </body>

</html>

注意：mainbody中的div顺序是左、右、中；颠倒之后害死人阿

posted on 2013-04-18 15:38 一路前行阅读(3595) 评论(0) 编辑收藏举报