CSS学习之三列自适应等高

最新推荐文章于 2022-11-08 09:38:03 发布

何东狮吼

最新推荐文章于 2022-11-08 09:38:03 发布

阅读量855

点赞数

分类专栏： css 文章标签： css class xhtml javascript application testing

本文链接：https://blog.csdn.net/hedong37518585/article/details/6630062

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度相等的列</title>
<style type="text/css">
*{  
    margin:0;  
    padding:0;  
}
body {
	font: 12px "宋体";
	margin: 20px;
	color: #fff;
}
h1 {
	font-size: 24px;
	font-weight: normal;
}
p {
	font-size: 14px;
	margin: 10px 0;
}
.box {
	width: 250px;
	margin-left: 20px;
	float: left;
	display: inline;
	padding: 20px;
}
.wrapper {
	overflow: hidden;
	width: 100%;
	position: relative;
}
.box {
	padding-bottom: 220px;
	margin-bottom: -200px;
	background: #89ac10 url(top.gif) no-repeat left top;
}
.bottom {
	position: absolute;
	bottom: 0;
	height: 20px;
	width: 290px;
    background: #89ac10 url(bottom.gif) no-repeat left bottom;
	margin-left: -20px;
}
</style>
</head>

<body>
<div class="wrapper">
	<div class="box">
		<h1>Andy Budd</h1>
		<p>Andy is the Managing Director of Clearleft. He also goes by the title of User Experience Director depending what mood he’s in. Andy is the author of CSS Mastery, curates the dConstruct and UX London events and is responsible for Silverbackapp, our low cost usability testing application for the Mac.</p>
		<div class="bottom"></div>
	</div>

	<div class="box">
		<h1>Richard Rutter</h1>
		<p>Richard is a founding partner and the production director for Clearleft. He has been designing websites and web applications since the birth of the commercial web, over twelve years ago. Richard leads the user experience team at Clearleft, pioneering innovative approaches to designing fantastic experiences for clients and their customers.</p>
		<div class="bottom"></div>
	</div>

	<div class="box">
		<h1>Jeremy Keith</h1>
		<p>Jeremy is a hugely experienced developer specialising in XHTML, CSS, Javascript and PHP-driven solutions. Jeremy is technical director at Clearleft.</p>
		<div class="bottom"></div>
	</div>
</div>
</body>
</html>

用到的2张图片

原理：

利用容器padding-bottom: 220px; margin-bottom: -200px;相互抵销内外边距，但同时又可以填充由于文字内容不足导致的空白部分，且这部分空白由于有和图片一样的背景色，故视觉效果上看上去就没有空白了

然后用父容器的overflow: hidden;裁剪掉多余的部分（按照最短的那列开始裁去超出的其他列），这时候3列容器的底部就是一样齐了，最后用bottom:0把底部图片绝对定位到容器的底部，至此3列就可以等高而不受内容高度影响，也就是说不需要文字内容去撑开容器高度，也不需要设置3列的容器为固定的高度就可以自适应等高

实际操作中发现，如果其中一列的文字特别长，而其他两列很多，就有必要增加内外边距的抵消，比如把内边距设置520px，外边距-500px;就可以增加隐藏的填充部分