div布局之左定宽右自适应

来源:互联网 发布:淘宝官方电话人工服务 编辑:程序博客网 时间:2024/06/06 05:13

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>左定宽右自适应</title><style type="text/css">    *    {    padding: 0px;    margin: 0px;    border: 0px;    }    body    {    width: 100%;    height: 100%;    clear: both;    }    .g-hd    {    width: 100%;    height: 30px;    background-color: yellow;    }    .g-left    {                        width: 200px;                        height: 500px;                        background-color: green;                        float: left;                        border-right: 3px solid pink;                        display: table-cell;                        position: relative;    }    .g-right    {                        width: 100%;                        height: 500px;                        background-color: red;                    }    .ft    {    width: 100%;    height: 30px;    background-color: blue;    float: left;    }</style></head>    <body>        <div class="g-bd">            <div class="g-hd">                             </div>            <div class="g-ct">                <div class="g-left">                                </div>                <div class="g-right">                                </div>            </div>            <div class="ft">                        </div>        </div>    </body></html>