两栏/三栏布局

发表于 | 分类于 | 阅读次数

两栏布局——右边自适应

两栏布局——右边自适应

定位（absolute） + margin-left

左边一栏设置宽度和定位（absolute），并且定位到左上角（top:0;left:0）；
右边一栏设置左边外边距（margin-left）为左边一栏的宽度；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- HTML 代码： -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	background: red;
}
#right{
	margin-left: 200px;
	background: blue;
}

定位（absolute） + 定位（absolute）

左边一栏设置宽度和定位（absolute），并且定位到左上角（top:0;left:0）；
右边一栏同样设置定位（absolute），并且定位到右上角（top:0;right:0;left:左边一栏的宽度）；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- HTML 代码： -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	background: red;
}
#right{
  position: absolute;
  top: 0;
  right: 0;
  left: 200px;
  background: blue;
}

以上两种方法（暂且成为“定位法”），对 DOM 元素的顺序没有要求。因此，如果要求右边 DOM 元素在左边 DOM 元素前面，上面的方法同样可以实现理想的效果。

浮动（float） + margin-left

左边一栏设置宽度和浮动（float:left）；
右边一栏设置外边距（margin-left）为左边一栏的宽度；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- HTML 代码： -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	float: left;
	width: 200px;
	background: red;
}
#right{
	margin-left: 200px;
	background: blue;
}

浮动（float:left） + overflow:hidden

左边一栏设置宽度和浮动（float:left）；
右边一栏设置 overflow:hidden；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- HTML 代码： -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	float: left;
	width: 200px;
	background: red;
}
#right{
	background: blue;
	overflow: hidden;
}

这两种方法（暂且成为“浮动法”），对 DOM 元素的顺序有一定的要求：必须要把浮动的元素放在前面，否则无法达到预期效果。

两栏布局——左边自适应

两栏布局——左边自适应

左边自适应其实跟右边自适应是一回事，也有对应的四种方法，这里就不啰嗦，直接给出四种方法的代码。

margin-right + 定位(absolute)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- HTML 代码： -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	margin-right: 200px;
	background: red;
}
#right{
  position: absolute;
  right: 0;
	top: 0;
	width: 200px;
  background: blue;
}

定位(absolute) + 定位(absolute)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- HTML 代码： -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	position: absolute;
	background: red;
	left: 0;
	top: 0;
	right: 200px;
}
#right{
  position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	background: blue;
}

overflow:hidden + 浮动（float:right）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- HTML 代码： -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	background: red;
	overflow: hidden;
}
#right{
	float: right;
	width: 200px;
	background: blue;
}

margin-right + 浮动（float:right）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- HTML 代码： -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	background: red;
	margin-right: 200px;
}
#right{
	width: 200px;
	float: right;
	background: blue;
}

三栏布局——左右两边固定宽度，中间自适应

三栏布局——左右两边固定宽度，中间自适应

定位（absolute） + margin + 定位（absolute）

左边一栏设置宽度和定位（position:absolute），并且定位到左上角（left:0;top:0）；
右边一栏设置宽度和定位（position:absolute），并且定位到右上角(right:0;top:0)；
中间一栏设置外边距（margin：0 右边宽度 0 左边宽度）；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- HTML 代码 -->
<div id="left">LEFT</div>
<div id="mid">MID</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	background: red;
}
#right{
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	background: green;
}
#mid{
	margin: 0 100px;
	background: blue;
}

定位（absolute） + 定位（absolute） + 定位（absolute）

左边一栏设置宽度和定位（position:absolute），并且定位到左上角（left:0;top:0）；
右边一栏设置宽度和定位（position:absolute），并且定位到右上角(right:0;top:0)；
中间一栏设置定位（position:absolute），并且定位到中间（left:左边一栏的宽度;right:右边一栏的宽度;top:0;）

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
<!-- HTML 代码 -->
<div id="left">LEFT</div>
<div id="mid">MID</div>
<div id="right">RIGHT</div>
<!-- CSS 代码 -->
#left{
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	background: red;
}
#right{
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	background: green;
}
#mid{
	position: absolute;
	left: 100px;
	right: 100px;
	top: 0;
	background: blue;
}

浮动（float:left） + margin + 浮动（float:right）

左边一栏设置宽度和浮动（float:left）；
右边一栏设置宽度和浮动（float:right）；
中间一栏设置外边距（margin: 0 右边宽度 0 左边宽度）；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- HTML 代码 -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<div id="mid">MID</div>
<!-- CSS 代码 -->
#left{
	float: left;
	width: 100px;
	background: red;
}
#mid{
	margin: 0 100px;
	background: blue;
}
#right{
	float: right;
	width: 100px;
	background: green;
}

注意：这里对 DOM 元素的顺序有要求，即一定要把浮动元素放在前面，也就是要把左边一栏和右边一栏的 div 放在中间一栏的 div 前面，否则无法达到预期效果，下同。

浮动（float:left） + overflow:hidden + 浮动（float:right）

左边一栏设置宽度和浮动（float:left）；
右边一栏设置宽度和浮动（float:right）；
中间一栏设置 overflow:hidden；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- HTML 代码 -->
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<div id="mid">MID</div>
<!-- CSS 代码 -->
#left{
	float: left;
	width: 100px;
	background: red;
}
#mid{
	overflow:hidden;
	background: blue;
}
#right{
	float: right;
	width: 100px;
	background: green;
}
您的支持将鼓励我继续创作！