（转）八种创建等高列布局

最新推荐文章于 2024-01-24 17:50:46 发布
最新推荐文章于 2024-01-24 17:50:46 发布
阅读量757 收藏 1
点赞数
分类专栏： Div+Css+Js 文章标签： css CSS Css div DIV html Html HTML 等高

高 度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置 一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列 布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。

如果一个设计是固定宽度（非流体的宽度设计），那么实现多列等高效果是相当的容易。最好的技术就是使用Dan Cederholm的Faux Columns技 术。只要制作一张合适的背景图片，在你多列的父元素中进行垂直铺放，从而达到一种假像（假的多列等高布局效果）。但是在流体布局中要用CSS实现多列等高 的设计那就不是那么容易的事情，因为我们没有办法在使用背景图片来实现多列等高的假像了，那么是不是就没有办法实现了呢？那当然不是那么回事了，不管是实 现固定布局还是流体布局的等多列等高视觉效果，方法还是蛮多的，这些方法体现了CSS的不同技术，也各有千秋，下面我们就一起来探讨Web页面中的多列等 高的实现技术。

下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果，正如下图所示：

一、假等高列

这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像：

Html Markup

1
2
3
4
5
< div class=”container clearfix”>
     < div class=”left”></ div >
     < div  class=”content”></ div >
     < div class=”right”></ div >
</ div >

在制作样式之前需要一张类似下面的背景图：

CSS Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container {
         background : url ( "column.png" ) repeat-y ;
         width : 960px ;
         margin : 0 auto ;
         }
         . left {
         float : left ;
         width : 220px ;
         }
         .content {
         float : left ;
         width : 480px ;
         }
         . right {
         float : left ;
         width : 220px ;
         }

优点：

实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现。

缺点：

使用这种方法不适合流体布局等高列的布局，另外如果你需要更换背景色或实现其他列数的等高列时，都需要重新制作过背景图。

二、给容器div使用单独的背景色（固定布局）

这种方法实现有点复杂，如果你理解其实现过程也是相当的简单。这种方法我们主要给每一列的背景设在单独的<div>元素上。这种方法的实现的原则是：任何<div>元素的最大高度来撑大其他的<div>容器高度。如下图所示：

上图中，不管我们哪一列的高度最高，那么其三个容器“rightBack,contentBack,leftBack”的高度相应会随最高列的高列变化，下面我们一起来看其实现过程：

Html Markup

1
2
3
4
5
6
7
8
9
10
11
< div >
     < div >
         < div >
             < div >
                 < div id = "left" ></ div >
                 < div id = "content" ></ div >
                 < div id = "right" ></ div >
             </ div >
         </ div >
     </ div >
</ div >

CSS Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<style type= "text/css" >
         .container {
             width : 960px ;
             margin : 0 auto ;
         }
         .rightWrap {
             width : 100% ;
             float : left ;
             background : green ;
             overflow : hidden ;
             position : relative ;
         }
 
         .contentWrap {
             float : left ;
             background : orange;
             width : 100% ;
             position : relative ;
             right : 320px ; /*此值等于rightSidebar的宽度*/
         }
 
         .leftWrap{
             width : 100% ;
             background : lime ;
             float : left ;
             position : relative ;
             right : 420px ; /*此值等于Content的宽度*/
         }
         # left {
             float : left ;
             width : 220px ;
             overflow : hidden ;
             position : relative ;
             left : 740px ;
         }
         #content {
             float : left ;
             width : 420px ;
             overflow : hidden ;
             position : relative ;
             left : 740px ;
         }
         # right {
             float : left ;
             overflow : hidden ;
             width : 320px ;
             position : #333 ;
             position : relative ;
             left : 740px ;
         }
     </style>

看起来蛮复杂吧？其实你只要了解了它是如何的工作原理就会变得非常简单，你只要理解并掌握以下几点：

  1. “div.rightWrap”、“div.contentWrap”、“div.leftWrap”都是一个封闭的容器；而“div#left”、“div#content”、“div#right”就是我们所说的列，里面放了内容；
  2. 每 一个容器对应一列的背景色（用来放置背景色或背景图片）；此例对应的是：“div.rgithWrap”用来实现“div#right”列的背景 色；“div.contentWrap”用来实现“div#content”列的背景色；“div.leftWrap”用来实现“div#left”列的 背景色；
  3. 除了最外面的容器（也就是对应的最左列容器）外，我都都对他们进行相对定位，并且设置其“right”值，此值并和相对应的列 宽相等。此例中“div.contentWrap”对应的刚好是“div#right”的宽度；而“div.leftWrap”对应用的刚好是 “div#content”的宽度；
  4. 给每列进行左浮动，并设置其列宽
  5. 给每一列设置相对定位，并进行“left”设置，而且“left”的值等于除第一列的所有列宽的和。此例中“left”的值等于“div#right”和“div#content”两列的宽度之和，也就是320px+420=740px

用两幅图来展示其实现的过程：

下图是实现上面的第二步对应的示例图，也就是容器“div.rightWrap”，“div.contentWrap”，“div.leftWrap”进行相对定位（position: releative）,并展示了如何设置对应的“right”值。

上图虚线代表的范围是可视范围，其中有两列背景将会溢出，解决这个只需要在最外层容器“div.rightWrap”加上“overflow:hidden”就可以进行隐藏溢出的其他背景色。接下来下图所展示的是上面所说的第五步：

前面我们对三个内容元素都进行了相对定位，现在只需要按第五步将其定位回去，如上图所示。其实说到最后，你只要理解了这两幅，你就什么都清楚了。

优点：

这种方法是不需要借助其他东西（javascript,背景图等）,而是纯CSS和HTML实现的等高列布局，并且能兼容所有浏览器（包括IE6），并且可以很容易创建任意列数。

缺点：

这种方法不像其他方法一样简单明了，给你理解会带来一定难度，但是只要你理解清楚了，将能帮你创建任意列数的等高布局效果。

三、给容器div使用单独的背景色（流体布局）

这种布局可以说是就是第二种布局方法，只是这里是一种多列的流体等高列的布局方法。前面也说过了，其实现原理就是给每一列添加相对应用的容器，并进行相互嵌套，并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器，比如说我们说的三列，那么你就需要使用三个容器。如下图所示：

HTML Markup

1
2
3
4
5
6
7
8
9
< div id = "container3" >
         < div id = "container2" >
                 < div id = "container1" >
                         < div id = "col1" >Column 1</ div >
                         < div id = "col2" >Column 2</ div >
                         < div id = "col3" >Column 3</ div >
                 </ div >
         </ div >
     </ div >

CSS Code:

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
38
39
40
41
42
43
44
45
46
47
<style type= "text/css" >
     #container 3 {
         float : left ;
         width : 100% ;
         background : green ; /**/
         overflow : hidden ;
         position : relative ;
     }
 
     #container 2 {
         float : left ;
         width : 100% ;
         background : yellow;
         position : relative ;
         right : 30% ; /*大小等于col3的宽度*/
     }
 
     #container 1 {
         float : left ;
         width : 100% ;
         background : orange;
         position : relative ;
         right : 40% ; /*大小等于col2的宽度*/
     }
 
     #col 1 {
         float : left ;
         width : 26% ; /*增加了2%的padding，所以宽度减少4%*/
         position : relative ;
         left : 72% ; /*距左边呀增加2%就成72%*/
         overflow : hidden ;
     }
     #col 2 {
         float : left ;
         width : 36% ; /*增加了2%的padding，所以宽度减少4%*/
         position : relative ;
         left : 76% ; /*距左边有三个padding为2%,所以距离变成76%*/
         overflow : hidden ;
     }
     #col 3 {
         float : left ;
         width : 26% ; /*增加了2%的padding，所以宽度减少4%*/
         position : relative ;
         left : 80% ; /*距左边5个padding为2%，所以距离变成80%*/
         overflow : hidden ;
     }
</style>

上面展示的是三列的，下面我们在来看一下两列和更多列的模板：

两列的HTML Markup：

1
2
3
4
5
6
< div id = "container2" >
     < div id = "container1" >
         < div id = "col1" >Column 1</ div >
         < div id = "col2" >Column 2</ div >
     </ div >
</ div >

两列的CSS Code:

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
<style type= "text/css" >
     #container 2 {
         float : left ;
         width : 100% ;
         background : orange;
         position : relative ;
         overflow : hidden ;
     }
     #container 1 {
         float : left ;
         width : 100% ;
         background : green ;
         position : relative ;
         right : 30% ;
     }
 
     #col 1 {
         width : 66% ;
         float : left ;
         position : relative ;
         left : 32% ;
     }
 
     #col 2 {
         width : 26% ;
         float : left ;
         position : relative ;
         left : 36% ;
     }
</style>

四列的HTML Markup：

1
2
3
4
5
6
7
8
9
10
11
12
< div id = "container4" >
     < div id = "container3" >
         < div id = "container2" >
             < div id = "container1" >
                 < div id = "col1" >col1</ div >
                 < div id = "col2" >col2</ div >
                 < div id = "col3" >col3</ div >
                 < div id = "col4" >col4</ div >
             </ div >
         </ div >
     </ div >
</ div >

四列的CSS　Code：

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<style type= "text/css" >
     #container 4 {
         float : left ;
         width : 100% ;
         background : green ;
         position : relative ;
         overflow : hidden ;
     }
 
     #container 3 {
         float : left ;
         width : 100% ;
         background : #B2F0F9 ;
         position : relative ;
         right : 20% ; /*此值等于col4的宽度*/
     }
 
     #container 2 {
         float : left ;
         width : 100% ;
         background : #89FFA2 ;
         position : relative ;
         right : 30% ; /*此值等于col3的宽度*/
     }
 
     #container 1 {
         float : left ;
         width : 100% ;
         background : #369 ;
         position : relative ;
         right : 30% ; /*此值等于col2的宽度*/
     }
 
     #col 1 {
         width : 18% ; /*1%的padding*/
         float : left ;
         position : relative ;
         left : 81% ;
         overflow : hidden ;
     }
 
     #col 2 {
         float : left ;
         width : 28% ;
         position : relative ;
         left : 83% ;
         overflow : hidden ;
     }
 
     #col 3 {
         float : left ;
         width : 28% ;
         position : relative ;
         left : 85% ;
         overflow : hidden ;
     }
 
     #col 4 {
         float : left ;
         width : 18% ;
         position : relative ;
         left : 87% ;
         overflow : hidden ;
     }
</style>

下面来看其实现过程，如果你理解了第二制作方法，那么这个你不用想一下就知道他们是一样的道理，如果你对第二种方法还不够清楚，那么你接着看这下面的内容，你会更清楚他们是怎么一回事的。下面我们一起来看三列的实现过程：

上图展示了，我们有三列，并且也说过了，这三列内容都放在了三个容器的div中，我们每一列的背景色不是放在内容列中，而是放置在容器中，现在我们需要通过对容器进行相对定位，把背景显示出来，而且我们这个容器是最外层的不能进行相对定位的移动，具体的请看下图：

上面我们把容器进行了相对定位，这样一来，我们内容也相应的做了移动，现在我们需要对页面列的内容也进行相对定位，并把内容和容器进行相反方向的定位，这样内容和容器背景色就能对应上了，请看下图所展示的：

接下来我们需要把溢出的部分切掉去，和前面一相，在最外面的容器加上overflow:hidden；这样就OK了。

最后为了让你的效果更加好看一点，你可以尝试给他们加上padding，比如说每列加上2%的padding值，具体实现可以简单从下图中得到：

优点：

兼容各浏览器，可以制作流体等高列，交无列数限制。

缺点：

标签使用较多，结构过于复杂，不易于理解，不过你掌握了其原理也就不难了，这也不算太大缺点。

三、创建带边框的现列等高布局

平常在制作中，我们需要制作两列的等高效果，并且有一条边框效果，那么这个实例我们就一起来看其实现方法：

Html Code

1
2
3
4
5
6
7
8
< div id = "wrapper" >
     < div id = "sidebar" >
         .....
     </ div >
     < div id = "main" >
         ....
     </ div >
</ div >

CSS Code:

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
38
39
<style type= "text/css" >
     html {
         background : #45473f ;
         height : auto ;
     }
 
     body {
         width : 960px ;
         margin : 20px auto ;
         background : #ffe3a6 ;
         border : 1px solid #efefef ;
     }
 
     #wrapper {
         display : inline- block ;
         border-left : 200px solid #d4c376 ;
         position : relative ;
         vertical-align : bottom ;
     }
 
     #sidebar {
         float : left ;
         width : 200px ;
         margin-left : -200px ;
         margin-right : -1px ;
         border-right : 1px solid #888 ;
         position : relative ;
     }
 
     #main {
         float : left ;
         border-left : 1px solid #888 ;
     }  
 
     #maing,
     #sidebar{
         padding-bottom : 2em ;
     }
</style>

优点：

可以制作带有边框的两列等高布局，并能兼容所有浏览器，结构简单明了。

缺点：

不适合于更多列的应用，比如说三列以上，这样的方法就行不通了。

四、使用正padding和负margin对冲实现多列布局方法

这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。下面一起来看代码：

HTML Markup:

1
2
3
4
5
6
7
8
9
10
11
< div id = "container" >
     < div id = "left" >
         < p >Sidebar</ p >
     </ div >
     < div id = "content" >
         < p >Main content</ p >
     </ div >
     < div id = "right" >
         < p >Sidebar</ p >
     </ div >
</ div >

CSS Code:

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
<style type= "text/css" >
 
         #container {
             margin : 0 auto ;
             overflow : hidden ;
             width : 960px ;
         }
 
         .column {
             background : #ccc ;
             float : left ;
             width : 200px ;
             margin-right : 5px ;
             margin-bottom : -99999px ;
             padding-bottom : 99999px ;
         }
 
         #content {
             background : #eee ;
         }
 
         # right {
             float : right ;
             margin-right : 0 ;
         }
     </style>

优点：

这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器

缺点：

这种方法存在一个很大的缺陷，那就是如果要实现每列四周有边框效果，那么每列的底部（或顶部）将无法有边框效果。

下面我们就针对这个缺陷来介绍两种解决办法，第一种是使用背景图来模仿底部（或顶部）边框；第二种方法是使用div来模仿列的边框，下面我们来看这两种方法：

1、背景图模仿边框效果：

Html Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
< div id = "containerOuter" >
         < div id = "containerInner" >
             < div id = "left" >
                 < p >Sidebar</ p >
             </ div >
             < div id = "content" >
                 < p >Main content</ p >
             </ div >
             < div id = "right" >
                 < p >Sidebar</ p >
             </ div >
         </ div >
     </ div >

CSS Code:

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
<style type= "text/css" >
         #containerOuter {
             background : url ( "images/bg.gif" ) no-repeat center bottom ;
             width : 616px ;
             margin : 0 auto ;
             padding-bottom : 1px ;
             overflow : hidden ;
         }
 
         #containerInner {
             float : left ;
             overflow : hidden ;
             margin-right : -5px ;
         }
 
         .column {
             background : #ccc ;
             border : 1px solid #000 ;
             float : left ;
             width : 200px ;
             margin-right : 5px ;
             margin-bottom : -99999px ;
             padding-bottom : 99999px ;
         }
 
         #content {
             background : #eee ;
         }
     </style>

这种方法我们需要在外面增加一个层，并将背景图放置在这个层的底部，而且需要制作一张和列边框色一致，并且要先排列好他们之间的间距，如下图所示：

这种方法有一个最大的不足之处就是，如果我们更改了列的边框的颜色，或者改变了他们之间的间距，都需要重新制作过一张背景图来重新模仿这样的效果，下面一起来看看这种方法带来的最后效果：

2、使用div来模仿列的边框

我们这种方法是在列里面添加一个div，用这个div来模仿边框的效果，具体看代码吧：

Html Code:

1
2
3
4
5
6
7
8
9
10
< div >
     < div >
         < div >
             < div > <!-- ie needs this comment for small div heights --> </ div >
         </ div >
         < div >
             < div > <!-- ie needs this comment for small div heights --> </ div >
         </ div >
     </ div >
</ div >

CSS Code:

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
38
39
40
41
42
43
44
<style type= "text/css" >
     .wrapper {
         width : 960px ;
         margin : 0 auto ;
     }
     .container {
         position : relative ;
         overflow : hidden ;
         zoom: 1 ;
     } /* zoom fix for ie6 */
     .col 1 {
         float : left ;
         width : 728px ;
         padding-bottom : 32767px ;
         margin-bottom : -32767px ;
         border : #f36 1px solid ;
         background : #AFAFAF ;
         }
     .col 2 {
         float : right ;
         width : 208px ;
         padding-bottom : 32767px ;
         margin-bottom : -32767px ;
         border : #f36 1px solid ;
         background : #6F6F6F ;
     }
     .colBottom 1 {
         position : absolute ; /*相对于div.container*/
         bottom : 0 ;
         left : 0px ; /*如果第一列左浮动就设置left:0;*/
         height : 1px ; /*当前列的边框宽度*/
         width : 730px ; /*当前列宽度+边框宽度*2 */
         background : #f36 ; /*当前列的边框颜色*/
         }
     .colBottom 2 {
         position : absolute ; /*相对于div.container*/
         bottom : 0 ;
         right : 0px ; /*如果第二列右浮动就设置left:0;*/
         height : 1px ; /*当前列的边框宽度*/
         width : 210px ; /*当前列宽度+边框宽度*2 */
         background : #f36 ; /*当前列的边框颜色*/
     }
 
</style>
五、使用边框和定位模拟列等高

这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。如：

Html Code:

1
2
3
4
< div id = "wrapper" >
     < div id = "mainContent" >...</ div >
     < div id = "sidebar" >...</ div >
</ div >

CSS Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type= "text/css" >
         #wrapper {
             width : 960px ;
             margin : 0 auto ;
         }
 
         #mainContent {
             border-right : 220px solid #dfdfdf ;
             position : absolute ;
             width : 740px ;
         }
 
         #sidebar {
             background : #dfdfdf ;
             margin-left : 740px ;
             position : absolute ;
             width : 220px ;
         }
     </style>

优点：

结构简单，兼容各浏览器，容易掌握。

缺点：

这个方法就是无法单独给主内容列设置背景色，并且实现多列效果效果不佳。

六、边框模仿等高列

第五种方法我们无法实现主列的背景色设置，针对上面方法，稍作一下改良，这样就可以实现主内容也设置颜色的效果了

CSS Html:

1
2
3
4
< div id = "container" >
     < div id = "content" >This is< br />some content</ div >
     < div id = "right" >This is the right</ div >
</ div >

CSS Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type= "text/css" >
         #container{
             background-color : #0ff ;
             overflow : hidden ;
             width : 960px ;
             margin : 0 auto ;
         }
         #content{
             background-color : #0ff ;
             width : 740px ;
             border-right : 220px solid #f00 ; /* 边框大小和颜色设置和right大小与颜色一样 */
             margin-right : -220px ; /*此负边距大小与right边栏宽度一样*/
             float : left ;
         }
         # right {
             background-color : #f00 ;
             width : 220px ;
             float : left ;
         }
     </style>

下面我们在此基础上改变流体布局：

HTML Markup

1
2
3
4
< div id = "container" >
     < div id = "content" >Main content section</ div >
     < div id = "sidebar" >Right Sidebar </ div >
</ div >

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type= "text/css" >
     #container{
         background-color : #0ff ;
         overflow : hidden ;
         margin : 0 100px ;
         padding-right : 220px ; /* 宽度大小等与边栏宽度大小*/
     }
     * html #container{
         height : 1% ; /* So IE plays nice */
     }
     #content{
         background-color : #0ff ;
         width : 100% ;
         border-right : 220px solid #f00 ;
         margin-right : -220px ;
         float : left ;
     }
     #sidebar{
         background-color : #f00 ;
         width : 220px ;
         float : left ;
         margin-right : -220px ;
     }
</style>

上面主要展示了这种方法的二列布局，下面我们在来看看三列布局的用法

HTML Markup

1
2
3
4
5
6
7
< div id = "containerOuter" >
     < div id = "container" >
         < div id = "content" >Main content section</ div >
         < div id = "left" >LEFT sidebar</ div >
         < div id = "right" >RIGHT sidebar</ div >
     </ div >
</ div >

CSS Code:

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
<style type= "text/css" >
         #containerOuter {
             margin : 0 auto ;
             width : 960px ;
         }
         #container{
             background-color : #0ff ;
             float : left ;
             width : 520px ;
             border-left : 220px solid #0f0 ; /* 边框大小等于左边栏宽度，颜色和左边栏背景色一致*/
             border-right : 220px solid #f00 ; /* 边框大小等于右边栏宽度，颜色和右边栏背景色一致*/
         }
         # left {
             float : left ;
             width : 220px ;
             margin-left : -220px ;
             position : relative ;
         }
         #content{
             float : left ;
             width : 520px ;
             margin-right : -520px ;
         }
         # right {
             float : right ;
             width : 220px ;
             margin-right : -220px ;
             position : relative ;
         }
     </style>

接着在看一个三列自适应布局

Html Markup

1
2
3
4
5
< div id = "container" >
     < div id = "content" >Main Content</ div >
     < div id = "left" >Left Sidebar</ div >
     < div id = "right" >Right Sidebar</ div >
</ div >

CSS Code

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 type= "text/css" >
         body{
         margin : 0 100px ;
         padding : 0 220px 0 220px ;
     }
     #container{
         background-color : #0ff ;
         float : left ;
         width : 100% ;
         border-left : 220px solid #0f0 ;
         border-right : 220px solid #f00 ;
         margin-left : -220px ;
         margin-right : -220px ;
         display : inline ; /* So IE plays nice */
     }
     # left {
         float : left ;
         width : 220px ;
         margin-left : -220px ;
         position : relative ;
     }
     #content{
         float : left ;
         width : 100% ;
         margin-right : -100% ;
     }
     # right {
         float : right ;
         width : 220px ;
         margin-right : -220px ;
         position : relative ;
     }
</style>

优点：

能兼容所有浏览器效果，结构简单明了，容易掌握。

缺点：

列数受到极限，超过三列不好控制。

七、模仿表格布局实列等高列效果

这种方法只适合现代浏览器，本不想介绍的，不过还是顺便列出让大家参考一下吧：

HTML Markup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< div >
     < div >
         < div >
             < div >
                 ....
             </ div >
         </ div >
 
         < div >
             < div >
                 ...
             </ div >
         </ div >
 
         < div >
             < div >
                 ...
             </ div >
         </ div >
 
     </ div >
</ div >

CSS Code:

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
<style type= "text/css" >
     .table {
         width : auto ;
         min-width : 1000px ;
         margin : 0 auto ;
         padding : 0 ;
         display :table;
     }
 
     .tableRow {
         display : table-row ;
     }
 
     .tableCell {
         display : table-cell ;
         width : 33% ;
     }
 
     .cell 1 {
         background : #f00 ;
     }
 
     .cell 2 {
         background : #0f0 ;
     }
 
     .cell 3 {
         background : #00f ;
     }
</style>

优点：

这是一种非常简单，易于实现的方法。

缺点：

兼容性不好，在ie6-7无法正常运行。

八、jQuery和javascript大法

最后要给大家介绍的是使用jQuery和javascript方法来实现多列的布局效果。

1、jQuery实现方法:

Html Markup

1
2
3
4
5
< div >
     < div id = "left" ></ div >
     < div id = "content" ></ div >
     < div id = "right" ></ div >
</ div >

CSS Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type= "text/css" >
     .contanier {
         width : 960px ;
         margin : 0 auto ;
     }
 
     .aside,
     .section {
         float : left ;
         width : 33% ;
         background : lime ;
     }
 
     .leftSidebar { background : orange;}
     .section { background : green ;}
</style>

jQuery Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< script type = "text/javascript" >
     $(document).ready(function(){
         //等高列的小插件
         function setEqualHeight(columns) {
             var tallestColumn = 0;
             columns.each(function(){
                 currentHeight = $(this).height();
                 if(currentHeight > tallestColumn) {
                     tallestColumn = currentHeight;
                 }
             });
             columns.height(tallestColumn);
         }
         //调用写好的插件，基中“.container > div”是你需要实现的等高列
         setEqualHeight($(".container > div"));
     });
</ script >

你也可以把上面的jQuery代码换成下面的

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
<script type= "text/javascript" >
     $(document).ready( function (){
         var currentTallest = 0,
                 currentRowStart = 0,
                 rowDivs = new Array(),
                 $el,
                 topPosition = 0;
 
      $( '.column' ).each( function () {
          $el = $( this );
          topPostion = $el.position().top;
          if (currentRowStart != topPostion) {
              // we just came to a new row.  Set all the heights on the completed row
              for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                  rowDivs[currentDiv].height(currentTallest);
              }
              // set the variables for the new row
              rowDivs.length = 0; // empty the array
              currentRowStart = topPostion;
              currentTallest = $el.height();
              rowDivs.push($el);
          } else {
              // another div on the current row.  Add it to the list and check if it's taller
              rowDivs.push($el);
              currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
         }
         // do the last row
          for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
              rowDivs[currentDiv].height(currentTallest);
          }
      });?
     });
</script>

如果你使用上面这个jQuery代码，你需要在需要实现等高列的div中加上”column”类名，这样才会有效果的。

2、JavaScript方法

上面是jQuery的实现方法，接下来看看javaScript的实现方法：

Html Markup:

1
2
3
4
5
< div >
     < div id = "left" ></ div >
     < div id = "content" ></ div >
     < div id = "right" ></ div >
</ div >

CSS Code:

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
<style type= "text/css" >
     .contanier {
         width : 960px ;
         margin : 0 auto ;
     }
 
     # left {
         width : 220px ;
         float : left ;
         margin-right : 20px ;
         background : green ;
     }
 
     #content {
         width : 480px ;
         float : left ;
         margin-right : 20px ;
         background : lime ;
     }
 
     # right {
         width : 220px ;
         float : right ;
         background : orange;
     }
</style>

Javascript Code:

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
38
<script type= "text/javascript" >
     function matchColumns(classname){
         var divs,contDivs,maxHeight,divHeight,d;
         // get all <div> elements in the document
         divs=document.getElementsByTagName( 'div' );
         contDivs=[];
         // initialize maximum height value
         maxHeight=0;
         // iterate over all <div> elements in the document
         for ( var i=0;i<divs.length;i++){
                 // make collection with <div> elements with class attribute 'container'
                 if ( new RegExp( "b" + classname + "b" ).test(divs[i].className)){
                     d=divs[i];
                     contDivs[contDivs.length]=d;
                     // determine height for <div> element
                     if (d.offsetHeight){
                         divHeight=d.offsetHeight;
                     }
                     else if (d.style.pixelHeight){
                         divHeight=d.style.pixelHeight;
                     }
                     // calculate maximum height
                     maxHeight=Math.max(maxHeight,divHeight);
                 }
         }
         // assign maximum height value to all of container <div> elements
         for ( var i=0;i<contDivs.length;i++){
             contDivs[i].style.height=maxHeight + "px" ;
         }
}
// Runs the script when page loads
window.onload= function (){
     if (document.getElementsByTagName){
 
         matchColumns( 'column' ); //
     }
}
</script>

上面八大种方法就是我今天要跟大家一起分享的等高列的布局方法，他们之间更有千秋，希望能给需要的您带来一定的帮助。篇幅过长，慢慢看吧，上面的代码都是经过测试的，兼容各大浏览器，可以直接复制代码使用。

转自：W3CPLUS

qinglinglaoren
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web页面中八种创建多列等高(等高列布局)的实现技术
09-25
高度相等列在Web页面设计中永远是一个网页设计师的需求;大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情;下面我们就一起来探讨Web页面中的多列等高的实现技术
八种创建等高列布局
AllinShang的专栏
02-20 1185
转自：http://www.w3cplus.com/css/creaet-equal-height-columns 高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道
CSS等高布局的6种方式
weixin_33755847的博客
05-05 111
目录 [1]边框模拟[2]负margin[3]table[4]absolute[5]flex[6]js 前面的话 　　等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现和js判断这四种真等高布局 ...
Html+CSS 多列等高布局 padding补偿法 《精通CSS高级WEB标准解决方案》读书笔记
迎难而上
03-31 2611
今天博主看了一种多列等高布局的方法，分享给大家。 主要思想： 原理： 这种技术的关键是给每个框设置大的底内边距，然后用数值相似的负外边距消除这个高度。这会导致每个列溢出容器元素。如果把容器的overflow属性设置为hidden,列就在最高点被裁切。 知识背景: 1.background 会填充内边距 padding，而不会填充外边距 margin 。 2.通过 overflow:hi
css多种方式实现等高布局
weixin_34087307的博客
01-05 268
本文讲的等高布局是在不手动设置元素高度的情况下，使用纯css实现各个元素高度都相当的效果。如图： 1、使用table-cell实现(兼容IE8) <style> body,div,ul,li{margin: 0;padding: 0;} li{list-style: none;} .table-layo...
css设置多列等高布局的方法示例
09-22
本文将详细讲解三种使用CSS实现多列等高布局的方法：弹性盒子布局（Flexbox）、表格单元格布局（Table-Cell）以及假等高列布局（Padding-Margin负值）。 1. **弹性盒子布局（Flexbox）** Flexbox是CSS3引入的一种...
css布局实例:网页布局的方法
09-27
本文主要探讨一种利用CSS的`display`属性来模拟表格布局的方法，这种方法尤其适用于创建等高列的布局。具体来说，通过设置`display: table`、`display: table-row`和`display: table-cell`，我们可以让普通的div元素...
纯CSS无hacks的跨游览器自适应高度多列布局 推荐
09-25
【纯CSS无hacks的跨浏览器自适应高度多列布局】是一种实现网页设计中等高多列的方法，不依赖任何JavaScript、图片或者CSS hack。该技术由Matthew James Taylor提出，并在此基础上进行了简化，便于初学者理解。核心...
CSS等高布局的7种方式
weixin_34015336的博客
05-04 370
前面的话 　　等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现、grid实现和js判断这五种真等高布局   伪等高 边框模拟 　　因为元素边框和元素高度始终是相同高度，用元素的边框颜色来伪装左右两个兄弟元素...
图片等高响应式布局DEMO
11-29
具体原理，参考了腾讯砖墙布局的思路：http://isux.tencent.com/high-equal-response-layout-html.html
自存 防忘 ,如何让element ui栅格系统 ,el-col高度一样
最新发布
2301_78916954的博客
01-24 1265
2.要设置卡片高度为100%
等高布局 圣杯布局 双飞翼布局
qq_39454316的博客
08-22 141
等高布局 假等高 通过设置padding 与margin值相抵消来达到等高 注意：父元素一定要设置溢出隐藏 overflow：hidden； 父元素靠内容撑开 所以他的高等于最高的子元素的高 father{ overflow:hidden; } div{ float:left; padding-bottom:9999px; margin-bottom:-9999px;...
CSS布局 --- 等宽&等高布局
帕尼尼的博客
08-25 2021
网易云课堂学习笔记三：等宽&amp;amp;amp;等高布局 等宽布局 float+box-sizing DOM结构 &amp;amp;lt;div class=&amp;quot;row&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;col&amp;quot;&amp;amp;gt;1&amp;amp;lt;/div&amp;amp;
利用border实现等高布局
qq_21428081的博客
03-04 459
参考张鑫旭慕课网CSS视频border课程：https://www.imooc.com/learn/755 利用border实现等高布局（边框宽度固定），效果图如下 HTML: <div class="box clearfix"> <nav class="left"> <h3>导航1</h3> ...
css经典布局系列二——等分等高布局
weixin_34254823的博客
04-20 429
一列定宽，一列自适应 要求两列，左边一列固定宽度，右边一列根据浏览器自适应； <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> &...
等高布局的方法1
m0_73749524的博客
10-13 66
每一列固定padding-bottom，同时指定一个margin负值，抵销padding的占位。等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。通过浮动创建一个正常的三列布局（不同列背景不同）利用margin负值抵销padding的占位。利用padding和margin负值相抵消。合理的控制padding和margin值。父容器overflow:hidden。其中任意一列变高，其它列同步变高。利用padding提前延伸背景。1.1、实现要点（需求）可以实现任意列等高布局。1.2.2、实现步骤。
CSS实现等高布局
好记性不如烂笔头~
03-01 3621
等高布局的实现方式有很多种这介绍两种非常实用的主流的方法，如下： //html &lt;div class='box'&gt; &lt;div class='left'&gt; &lt;div class='bor'&gt;&lt;/div&gt; dasdsgerfadcdasdsfdsfdsfdsfdsfdfsdf &lt;/div&gt; ...
div flex布局
09-06
div flex布局是CSS中一种用于创建灵活的盒模型布局的技术。它是基于Flexbox模型实现的，通过对父元素应用display: flex属性，可以使其成为一个flex容器，而将子元素设置为flex项。 使用flex布局可以更轻松地实现水平和垂直居中、等高列布局、自适应布局等常见的布局需求。下面是一个简单的示例代码： HTML代码： ``` <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` CSS代码： ``` .container { display: flex; } .item { flex: 1; border: 1px solid black; padding: 10px; } ``` 这个示例中，通过将容器元素设置为flex容器，子元素会自动按照一定的规则进行排列。在子元素上设置flex: 1属性，使其自动填充剩余空间，从而实现等宽布局。 当然，flex布局还有很多其他属性和特性，比如justify-content用于设置主轴上的排列方式、align-items用于设置交叉轴上的对齐方式等等。可以根据具体需求灵活运用这些属性来实现不同的布局效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值