1、两栏布局 左侧定宽 右侧自适应
|
1
2
3
4
|
<
div
class
=
"grid1"
>
<
div
class
=
"left_1"
>左侧定宽</
div
>
<
div
class
=
"right_1"
>右侧自适应</
div
>
</
div
>
|
|
1
2
|
.left_
1
{
float
:
left
;
width
:
200px
;}
.right_
1
{
margin-left
:
200px
;}
|
2、两栏布局 左侧自适应 右侧定宽
|
1
2
3
4
|
<
div
class
=
"grid2 clearfix"
>
<
div
class
=
"left_2"
>左侧自适应</
div
>
<
div
class
=
"right_2"
>右侧定宽</
div
>
</
div
>
|
|
1
2
|
.left_
2
{
float
:
left
;
width
:
100%
;
margin-right
:
-200px
;}
.right_
2
{
float
:
right
;
width
:
200px
;}
|
3、三栏布局 两侧定宽 中间自适应
|
1
2
3
4
5
|
<
div
class
=
"grid3 clearfix"
>
<
div
class
=
"left_3"
>左侧定宽</
div
>
<
div
class
=
"center_3"
>中间自适应</
div
>
<
div
class
=
"right_3"
>右侧定宽</
div
>
</
div
>
|
|
1
2
3
4
|
.left_
3
, .right_
3
{
position
:
relative
;
float
:
left
;
width
:
200px
;}
.left_
3
{
margin-right
:
-200px
;}
.right_
3
{
margin-left
:
-200px
;}
.center_
3
{
float
:
left
;
width
:
100%
;}
|
4、三栏布局 左侧自适应 中间和右侧定宽
|
1
2
3
4
5
|
<
div
class
=
"grid4 clearfix"
>
<
div
class
=
"left_4"
>左侧自适应</
div
>
<
div
class
=
"center_4"
>中间定宽</
div
>
<
div
class
=
"right_4"
>右侧定宽</
div
>
</
div
>
|
|
1
2
|
.center_
4
, .right_
4
{
position
:
relative
;
float
:
right
;
width
:
200px
;}
.left_
4
{
float
:
left
;
width
:
100%
;
margin-right
:
-400px
;}
|
5、三栏布局 左侧和中间定宽 右侧自适应
|
1
2
3
4
5
|
<
div
class
=
"grid5"
>
<
div
class
=
"left_5"
>左侧定宽</
div
>
<
div
class
=
"center_5"
>中间定宽</
div
>
<
div
class
=
"right_5"
>右侧自适应</
div
>
</
div
>
|
|
1
2
|
.left_
5
, .center_
5
{
position
:
relative
;
float
:
left
;
width
:
200px
;}
.right_
5
{
margin-left
:
400px
;}
|
以上写法可兼容5大浏览器，及IE6到IE8浏览器，具体代码参考附件
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1862698
