多列等高问题

在平常的设计中，我们常常会遇到排成一行的几列由于内容的不同导致容器高度不一致。
如图：
多列等高问题
解决方法：
一，使用js计算最长长度，在给其他赋值（还没有试验过，不好发表意见。以后再补）。
二，css
（1），css运用超出隐藏作假。缺点：真正的border被隐藏，border样式严重缺失。
示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
		<title>多列等高问题</title>
		<style>
			
			*{
				margin: 0px;
				padding: 0px;
			}
			
			html,body{
				background-color: #DEB887;
			}
			
			.wrapper{
                overflow: hidden;
                border: 2px solid darkblue;
			}
			
			.wrapper div{
				float: left;
				width: 20%;
				margin-left: 1%;
			    padding-bottom: 900px;
				margin-bottom: -880px;
				background-color: #CCFFCC;
				border: 2px solid red;
				border-radius: 15px;
			}
			
		</style>
	</head>
	<body>
		<div class="wrapper">
		    <div>content1</div>
			<div>content2</div>
			<div>content3</div>
			<div>content4</div>
		</div>
	</body>
</html>

运行截图：
多列等高问题
由此可见：底部border是缺失的。

（2），借助table的自适应特性，来进行构造。每个模块都是一个td(在代码里用display:table-cell;dispaly属性实现)。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
		<title>多列等高问题</title>
		<style>
			
			*{
				margin: 0px;
				padding: 0px;
			}
			
			html,body{
				background-color: #DEB887;
			}
			
			.wrapper{
                display: table;
                border: 2px solid darkblue;
				border-spacing: 10px;
			}
			
			.wrapper div{
				display: table-cell;
				width: 20%;
			    padding-bottom: 20px;
				background-color: #CCFFCC;
				border: 2px solid red;
				border-radius: 15px;
			}
			
			.tr{
				display: none;
			}
			
			@media(max-device-width:800px){
				
				.wrapper div{
					display: table-cell;
					width: 50%;
					padding-bottom: 20px;
					background-color: #CCFFCC;
					border: 2px solid red;
					border-radius: 15px;
				}
				
				.tr{
					display: table-row;
				}
				
			}
			
			@media(max-device-width:500px){
				
				.wrapper{
					display: block;
				}
				
				.wrapper div{
					display: block;
					width: 100%;
					margin-top: 10px;
					padding-bottom: 20px;
					background-color: #CCFFCC;
					border: 2px solid red;
					border-radius: 15px;
				}
				
				.tr{
					display: none;
				}
				
			}
			
		</style>
	</head>
	<body>
		<div class="wrapper">
		    <div>content1</div>
			<div>content2</div>
            <span class="tr"></span><!-- 另起一行（类似<tr>） -->
			<div>content3</div>
			<div>content4</div>
		</div>
	</body>
</html>

运行截图：
多列等高问题
优点：解决了第一种方法的弊端，而且在开发响应式页面时可以通过媒体查询（@media[类似if语句]）在不改动html结构基础上，只要在css中进行改动就能达到效果。

菜鸟爬行中…

相关推荐