两栏布局和三栏布局的实现

两栏布局

用 position

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.container {
position: relative;
}
.left {
position: absolute;
width: 200px;
}
.right {
margin-left: 200px;
}
</style>


<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>

用 float

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.clearfix {
overflow: hidden;
*zoom: 1;
}
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
</style>


<div class="clearfix">
<div class="left">
</div>
<div class="right">
</div>
</div>

用 inline-block

inline-block 将对象呈现为 inline 对象,但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个 link(a元素)inline-block 属性值,使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

可以使用 inline-block 来布局。有一些事情需要牢记:

  • vertical-align 属性会影响到 inline-block 元素,把它的值设置为 top
  • 设置每一列的宽度
  • 如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.left {
display: inline-block;
vertical-align: top;
width: 25%;
}
.right {
display: inline-block;
vertical-align: top;
width: 75%;
}
</style>


<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>

用 flexbox

新的 flexbox 布局模式被用来重新定义CSS中的布局方式,但只能在支持 flexbox 的 Chrome 浏览器中运行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.container {
display: -webkit-flex;
display: flex;
}
.left {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}
</style>


<div class="container">
<nav>
左侧导航
</nav>
<div class="flex-column">
右侧内容区
</div>
</div>

参考:CSS - flexbox

三栏布局(双飞翼布局)

实现方式一(用负边距)

仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用:

  • 浮动 float
  • 负边距 negative margin
  • 相对定位 relative position

双飞翼布局即三栏布局,如果把三栏布局比作一只大鸟,可以把 main 看成是鸟的身体,sub 和 extra 则是鸟的翅膀。

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
<style>
.main {
float: left;
width: 100%;
}
.sub {
float: left;
margin-left: -100%;
width: 190px;
}
.extra {
float: left;
margin-left: -230px;
width: 230px;
}
.main-wrap {
margin: 0 190px 0 230px;
}
</style>

<div class="container">
<div class="main">
<div class="main-wrap">
<p>this is main
</div>
</div>
<div class="sub">
<p>this is sub</p>
</div>
<div class="extra">
<p>this is extra</p>
</div>
</div>

当然,测试的时候不要忘了给 div 加 heightbackground-color,便于查看。

参考:双飞翼布局介绍-始于淘宝UED

实现方式二(用float)

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
<style>
.wrapper {
overflow: hidden;
*zoom: 1;
}
.left, .center, .right {
height: 300px;
}
.left {
float: left;
width: 200px;
background-color: green;
}
.center {
background-color: yellow;
}
.right {
float: right;
width: 230px;
background-color: red;
}
</style>

<div class="wrapper">
<div class="left">
this is left
</div>
<div class="right">
this is right
</div>
<div class="center">
this is main
</div>
</div>
坚持原创技术分享,您的支持将鼓励我继续创作!