各种布局

布局

 

 

 

两列右自适应布局

左侧定宽(190px)---右侧自适应

左侧定宽

右侧自适应

  

HTML:

01	<div class="sn-bd1 clearfix">

02	<div class="sn-sd1">

03	<p>左侧定宽</p>

04

</div>

05	<div class="sn-mn1">

06	<div class="sn-mn1c">

07	<p>右侧自适应</p>

08

</div>

09

</div>

10

</div>

CSS

1	/* 两列右侧自适应布局 */

2	.sn-bd1{margin:0 0 10px;}

3	.sn-sd1{position:relative;float:left;width:190px;margin-right:-190px;}

4	.sn-mn1{float:right;width:100%;}

5	.sn-mn1c{margin-left:200px;}

两列左侧自适应布局

左侧自适应---右侧定宽(230px)

 

HTML

01	<!-- 两列左侧自适应布局 -->

02	<div class="sn-bd2 clearfix">

03	<div class="sn-mn2">

04	<div class="sn-mn2c">

05	<p>左侧自适应</p>

06

</div>

07

</div>

08	<div class="sn-sd2">

09	<p>右侧定宽</p>

10

</div>

11

</div>

CSS

1	/* 两列左侧自适应布局 */

2	.sn-bd2{margin:0 0 10px;}

3	.sn-sd2{position:relative;float:right;width:230px;margin-left:-230px}

4	.sn-mn2{float:left;width:100%;;}

5	.sn-mn2c{margin-right:240px;}

两列定宽布局

左侧定宽(490px)---右侧定宽(230px)

左侧定宽

右侧定宽

HTML:

1	<!-- 两列定宽布局 -->

2	<div class="sn-bd clearfix">

3	<div class="sn-mn">

4	<p>左侧定宽</p>

5

</div>

6	<div class="sn-sd">

7	<p>右侧定宽</p>

8

</div>

9

</div>

CSS

1	/* 两列定宽布局 */

2	.sn-bd{width:730px;margin:0 auto;}

3	.sn-sd{float:right;width:230px;}

4	.sn-mn{float:left;width:490px;}

三列中间自适应布局

左侧定宽(230px)---中间自适应---右侧定宽(190px)

左侧定宽

中间自适应

 

 

 

右侧定宽

 

 

 

 

 

 

 

 

 

01	<!-- 三列中间自适应布局  -->

02	<div class="sn-bd5 clearfix">

03	<div class="sn-sd51">

04	<p>左侧定宽</p>

05

</div>

06	<div class="sn-mn5">

07	<div class="sn-mn5c">

08	<p>中间自适应</p>

09

</div>

10

</div>

11	<div class="sn-sd52">

12	<p>右侧定宽</p>

13

</div>

14

</div>

CSS

1	/* 三列中间自适应布局 */

2	.sn-bd5{margin:0 0 10px;}

3	.sn-sd51,.sn-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}

4	.sn-sd52{float:right;width:190px;margin:0 0 0 -190px;}

5	.sn-mn5{float:left;width:100%;}

6	.sn-mn5c{margin:0 200px 0 240px;}

三列左侧自适应布局

左侧自适应---右侧定宽(190px)---右侧定宽(230px)

左侧自适应

右侧定宽

右侧定宽

 

 

 

 

 

 

 

HTML:

01	<!-- 三列左侧自适应布局  -->

02	<div class="sn-bd4 clearfix">

03	<div class="sn-mn4">

04	<div class="sn-mn4c">

05	<p>左侧自适应</p>

06

</div>

07

</div>

08	<div class="sn-sd41">

09	<p>右侧定宽</p>

10

</div>

11	<div class="sn-sd42">

12	<p>右侧定宽</p>

13

</div>

14

</div>

CSS

1	/* 三列左侧自适应布局 */

2	.sn-bd4{margin:0 0 10px;}

3	.sn-sd41,.sn-sd42{position:relative;float:right;width:190px;}

4	.sn-sd41{width:230px;margin-left:10px;}

5	.sn-mn4{float:left;width:100%;margin-right:-430px;}

6	.sn-mn4c{margin-right:440px;}

三列右侧自适应布局

左侧定宽(190px)---右侧定宽(230px)---右侧自适应

左侧定宽

左侧定宽

右侧自适应

 

 

 

 

 

 

 

 

HTML:

01	<!-- 三列右侧自适应布局  -->

02	<div class="sn-bd3 clearfix">

03	<div class="sn-sd31">

04	<p>左侧定宽</p>

05

</div>

06	<div class="sn-sd32">

07	<p>左侧定宽</p>

08

</div>

09	<div class="sn-mn3">

10	<div class="sn-mn3c">

11	<p>右侧自适应</p>

12

</div>

13

</div>

14

</div>

CSS

1	/* 三列右侧自适应布局 */

2	.sn-bd3{margin:0 0 10px;}

3	.sn-sd31,.sn-sd32{position:relative;float:left;width:230px;}

4	.sn-sd31{width:190px;margin-right:10px;}

5	.sn-mn3{float:right;width:100%;margin-left:-430px;}