简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

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

WBOY
Release： 2016-06-24 11:32:45
Original
891 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

Related labels：
关于css布局的一些个人理解。（只是自己理解，不对的地方勿喷）
source：php.cn
Previous article：后缀为html、htm与shtml文件的区别_html/css_WEB-ITnose Next article：如果我把html＋css＋js搞得非常精通，有前途吗？_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to create a satisfying web design It cannot display my own designs. I want to create a redesign. Creating a web design is a ...
From 2023-08-10 17:09:33
0
1
236
为什么要编译linux内核？ 鄙人新手，对一些概念不能很理解，总有人说自己编译了一下linux内核，这个具体什么意思呢？有什么好处？还有模块编译又是个啥？编译会不会导致原来的linux炸掉？原来的内核是不是就是...
From 2017-04-17 14:29:54
0
5
592
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！