八种创建等高列布局
八种创建等高列布局
发布时间:2015-05-12 来源:查字典编辑
摘要:高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素...

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

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

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

八种创建等高列布局1

一、假等高列

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

Html Markup

				<div class=”container clearfix”>
					<div class=”left”></div>
					<div  class=”content”></div>
					<div class=”right”></div>
				</div>

			

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

八种创建等高列布局2

CSS Code:

				.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>容器高度。如下图所示:

八种创建等高列布局3

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

Html Markup

							<div class="container">
								<div class="rightWrap">
									<div class="contentWrap">
										<div class="leftWrap">
											<div class="aside column leftSidebar" id="left"></div>
											<div id="content" class="column section"></div>

											<div class="aside rightSidebat column" id="right"></div>
										</div>
									</div>
								</div>
							</div>
						

CSS Code:

							<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+Css教程学习
热门 Div+Css教程学习
网页设计子分类