介绍布局之前先说一下什么是文档流，文档流就是文档内元素的流动方向，内联元素从左向右流，块级元素从上向下流。
左右布局
1. 左右浮动
HTML代码
<body>
<div class="box">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
CSS样式
.box {
border: 1px solid red;
}
.box::after { /*在其父元素上清除浮动*/
content: '';
display: block;
clear: both;
}
.left {
border: 1px solid black;
float: left;
}
.right {
border: 1px solid black;
float: right;
}
效果图
左右浮动.png
注意：元素添加了浮动后，一定要在其父元素上清除浮动，否则父元素会没有高度。
2. 左侧固定宽度，右侧自适应
HTML代码
<div class="box">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>
CSS样式
.box {
border: 1px solid red;
}
.box::after { /*在其父元素上清除浮动*/
content: '';
display: block;
clear: both;
}
.left {
width: 100px;
border: 1px solid black;
float: left;
}
.right {
border: 1px solid black;
margin-left: 100px;
}
效果图
左侧定宽右侧自适应.png
左中右三栏布局
1. 绝对定位方法
- 左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离
HTML代码
<div class="box">
<div class="left">左侧</div>
<div class="middle">中间</div>
<div class="right">右侧</div>
</div>
CSS样式
body,html {
height: 100%;
}
.box {
position: relative;
border: 1px solid red;
height: 100%;
text-align: center;
}
.left, .right {
width: 100px;
height: 100%;
position: absolute;
top: 0;
}
.left {
border: 1px solid black;
left: 0;
}
.right {
border: 1px solid black;
right: 0;
}
.middle {
height: 100%;
border: 1px solid black;
margin: 0 100px;
}
效果图
左右定宽中间自适应.png
2. margin负值方法
HTML代码
<div class="box">
<div class="middle">
<div class="content">中间</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
CSS样式
body,html {
height: 100%;
}
.box {
border: 1px solid red;
height: 100%;
width: 100%;
text-align: center;
}
.middle {
width: 100%;
height: 100%;
float: left;
}
.middle .content {
height: 100%;
margin: 0 100px;
background: pink;
}
.left, .right {
width: 100px;
height: 100%;
float: left;
}
.left {
background: white;
margin-left: -100%;
}
.right {
background: yellow;
margin-left: -100px;
}
效果图
margin负值方法.png
3. 自身浮动方法
- 左栏左浮动，右栏右浮动，主体放在最后面。
HTML代码
<div class="box">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="middle">中间</div>
</div>
CSS样式
body,html {
height: 100%;
}
.box {
border: 1px solid red;
height: 100%;
width: 100%;
text-align: center;
}
.box::after {
content: '';
display: block;
clear: both;
}
.middle {
height: 100%;
background: pink;
margin: 0 100px;
}
.left, .right {
width: 100px;
height: 100%;
}
.left {
background: white;
float: left;
}
.right {
background: yellow;
float: right;
}
网友评论