等高列布局

最新推荐文章于 2022-10-09 09:13:05 发布

噗噗

最新推荐文章于 2022-10-09 09:13:05 发布

阅读量993

点赞数 1

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/ph_wuwuwu/article/details/23171281

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引子

什么是等高列布局？有时候我们想设计一个多列的布局，通常的做法就是使用多个div浮动的方法。但是我们知道，div的高度是随内容撑高的，所以如果不作处理的情况下多个列的高度会不一致。如果设置了背景，就给人一种参差不齐的视觉效果，非常不美观。所以，我们要想办法使得多个列的高度相等。

最简单的方法就是多个div设置相同的高度，不过显然这样很不灵活，因为一旦内容改变就无法适应，需要重新设置。也许你可以使用javascript来实现这个功能，但是这不是我们想要的。我们要的是一种布局样式，而不是用javascript实现的效果。也就是说，我们要用纯css来实现。

有什么方法呢？其实方法还是很多的，我这里简单的介绍几种。

容器嵌套法

这个名字是我自己起的，如果你不喜欢可以换别的名字，不必在意。其实现比较复杂，不过本质很简单，就是子元素把父元素撑高。我们知道，在不考虑浮动的情况下，父元素的高度会被其子元素的高度撑高。因此，我们可以为每一列设置一个容器，将这些容器嵌套，在最内层容器放内容，这样每一层的高度都是一样的了。然后，我们为每一层容器设置position，通过left或right进行偏移，从而达到多个列的效果。

在最内层容器里面，我们需要设置和列数同样多的div作为内容的容器，设置为浮动，并且通过设置position便宜到正确的位置。当然，这里有一个浮动的问题，我们后面再细说。

如果你没有听明白，没关系，我们用图来一步步的解释。

首先，我们设置一个最外层的div，作为整个布局的容器。

<body>
	<div class="container"></div>
</body>

.container {
	margin: 0 auto;
	width: 960px;
	overflow: hidden; // 这个很关键，后面会细说
}

然后，我们使用三个嵌套的div作为每一列的容器

<body>
	<div class="container">
		<div class="rightWrapper"> <!--这是右边的容器-->
			<div class="contentWrapper"> <!--这是中间的容器-->
				<div class="leftWrapper"> <!--这是左边的容器-->
				</div>
			</div>
		</div>
	</div>
</body>

.rightWrapper {
	width: 100%;
	background: #FFA07A;
}
.contentWrapper {
	width: 100%;
	background: #ADD8E6;
	position: relative;
	right: 320px; // 这是右列的宽度
}
.leftWrapper {
	width: 100%;
	background: #FAEBD7;
	position: relative;
	right: 420px; // 这是中列的宽度；剩下的960-320-420=220就是左列的宽度；实际上该容器相对于整个container向左偏移了740px
}

现在大家基本明白了吧！每一列的容器在横向占据了不同的位置，内层的容器会把外层的容器覆盖一部分，这是通过position来实现的。

然后我们添加内容的div

<body>
	<div class="container">
		<div class="rightWrapper">
			<div class="contentWrapper">
				<div class="leftWrapper">
					<div id="leftContainer">
					</div>
					<div id="contentContainer">
					</div>
					<div id="rightContainer">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

#leftContainer {
	float: left;
	width: 220px;
	position: relative;
	left: 740px; // 偏移到正确的位置
}
#contentContainer {
	float: left;
	width: 420px;
	position: relative;
	left: 740px; // 偏移到正确的位置
}
#rightContainer {
	float: left;
	width: 320px;
	position: relative;
	left: 740px; // 偏移到正确的位置
}

到了这一步，我们先回过头来看一看最外层的container，为什么给它设置一个overflow:hidden的样式呢？其实我们看到，不管是容器div还是内容div都使用了position进行偏移定位，这就不可避免的造成溢出，而这些溢出的内容都是可以丢弃的，所以我们在最外层进行overflow:hidden将这些溢出部分裁减掉。

好了，看上去我们的等高列布局已经完成了，但是如果我们将这些代码运行一次会发现，根本不是我们想要的效果。为什么会这样呢？

注意，我们前面有说到，“在不考虑浮动的情况下，父元素的高度会被其子元素的高度撑高”。然后我们看看代码，三个内容div都使用了浮动！为什么使用了浮动就不行了？

这就涉及到另一个问题，也就是著名的“子元素浮动导致父元素高度为0的问题”。要解决这个问题，基本上有三种方法：

第一，给父元素添加overflow:hidden样式，其原理是：对于添加了该样式的元素，浏览器将检查它的每个子元素，包括浮动元素的高度，从而决定该元素最终的高度；

第二，在父元素的结束标签</div>之前，添加清除浮动的div或者伪元素。你可以使用一个空的div或者after伪元素，将其样式设置为clear:both清除浮动。

第三，将父元素也设置为浮动。如果父元素和子元素同时浮动，那么父元素可以被子元素的内容撑高。

考虑到我们的问题，首先把第一种方法排除。为什么？原因是我们的内容div使用了偏移，而且已经偏移出了最内层容器，如果使用overflow:hidden样式，那么溢出的内容将看不见了，因此，这种方法对我们不适用。

第二种方法是很好的方法，只不过需要添加额外的div或者伪元素。我们使用这种方法。

<body>
	<div class="container">
		<div class="rightWrapper">
			<div class="contentWrapper">
				<div class="leftWrapper">
					<div id="leftContainer">
					</div>
					<div id="contentContainer">
					</div>
					<div id="rightContainer">
					</div>
					<div class="clearfix"></div> <!--使用空的div清除浮动-->
				</div>
			</div>
		</div>
	</div>
</body>