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

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

WBOY
Libérer: 2016-06-24 11:32:45
original
980 Les gens l'ont consulté

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

例如:

<!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>
Copier après la connexion

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

<!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>
Copier après la connexion

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal