常用两栏布局总结

  本文讲述常用的两栏布局:左边固定、右边自适应布局和右边固定、左边自适应布局和两栏等高布局,文中采用的是浮动布局的方式来实现两栏布局。

一.左边固定、右边自适应布局

  左边固定、右边自适应布局的实现方式是让左边的盒子浮动,右边的盒子设置margin-left属性,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
padding:0;
margin:0;
}
.container{
height:200px;
}
.div1{
width:200px;
height:200px;
background: red;
float:left;
}
.div2{
margin-left: 200px;
background: green;
height:200px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
</body>
</html>

样式为
左边固定、右边自适应布局

二.右边固定、左边自适应布局

  右边固定、左边自适应布局的实现方式是让右边边的盒子浮动,左边的盒子设置margin-right属性,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
padding:0;
margin:0;
}
.container{
height:200px;
}
.div1{
float:right;
width:200px;
height:200px;
background: red;;
}
.div2{
margin-right: 200px;
background: green;
height:200px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
</body>
</html>

样式为
右边固定、左边自适应布局

三.两栏等高布局

  实现两栏等高布局,可以采用padding补偿法。
  要点1:父容器设置超出隐藏:overflow:hidden;
  要点2:子容器设置padding-bottom:1000px;一个足够大的值。然后再设置一个margin-bottom的值和padding-bottom相等的负值 ,相抵消。
  这种方法称之为padding补偿法。当其中一列的高度增高时,总的高度就会随之增高。因为背景是可以用在padding占用的空间里的,而且边框也是跟随padding变化的,所以就成功的完成了一个障眼法。
  代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style>
#box{
width:900px;
font-size:28px;
line-height:300px;
text-align:center;
border:2px solid #000;
margin:10px auto;
background:#999;
overflow: hidden;
}
.left{
width:400px;
height:300px;
float:left;
background:#ccc;
margin-bottom:-1000px;
padding-bottom:1000px;
}
.right{
width:500px;
float:right;
background:#0F3;
margin-bottom:-1000px;
padding-bottom:1000px;
}
</style>
布局方面:
<div id="box">
<div class="left">
左边高度设为 height:500px;
</div>
<div class="right">
右边高度不用设置,自动实现等高
</div>
</div>

  这样就可以实现两栏等高布局啦,效果如下:
右边固定、左边自适应布局

dada wechat
欢迎您扫一扫上面的微信号,互相沟通交流

热评文章