>  기사  >  웹 프론트엔드  >  关于css布局的一些个人理解。(只是自己理解,不对的地方勿喷)_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:32:45936검색

两列布局(左侧宽度固定,右侧自适应)

例如:

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

三列布局,(左右宽度固定,中间自适应);

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.