关于css布局的一些个人理解。（只是自己理解，不对的地方勿喷）_html/css

关于css布局的一些个人理解。（只是自己理解，不对的地方勿喷）_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:32:45

Original

950 people have browsed it

两列布局（左侧宽度固定，右侧自适应）

例如：

<!doctype html><html><head><title>左部宽度固定，右部自适应</title><meta charset="utf-8"/><style type="text/css">    *{        margin:0px;        padding:0px;        font-size:14px;    }    div{        height:600px;    }    .left{        width:300px;        background:red;        float:left;            }    body div.right{        background:green;        margin-left:300px;            }</style>    <link rel="stylesheet" type="text/css" href=""/></head><body>    <div class="left">左部</div>    <div class="right">右部</div></body></html>

Copy after login

三列布局，（左右宽度固定，中间自适应）；

<!doctype html><html><head><title>左右宽度固定，中间自适应</title><meta charset="utf-8"/><style type="text/css">    *{        margin:0px;        padding:0px;        font-size:14px;    }    div{        height:700px;    }    .left{        width:300px;        background:red;        float:left;    }    .right{        width:400px;        background:yellow;        float:right;    }    .center{        background:blue;        margin:0 400px 0 300px;    }</style></head><body><div class="left">左</div><div class="right">右</div><div class="center">中</div></body></html>

Copy after login