`

HTML 三行自动等高

阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>三行自动等高</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;}
.main {overflow: hidden;width: 800px;margin: 0 auto;}
.left {float: left;width: 250px;overflow: hidden;}
.center {float:left;margin-left:5px;width:295px;}
.right {float: right;width: 245px;overflow: hidden;}
.bor_top {height:1px;background:#FB9D51;overflow:hidden;}
.equal {padding-bottom: 32767px;margin-bottom: -32767px;}
.box {background: #F5E2AF;border: 1px #FB9D51 solid;padding-left:10px;padding-right:10px;}
.mt5 {margin-top: 5px;}</style>
</head>
<body>
<div class="main">
	<div class="left equal">
		<div class="box"><p>阅谁问君诵，水落清香浮</p></div>
		<div class="box mt5"><p>阅谁问君诵，水落清香浮</p></div>
		<div class="box mt5"><p>阅谁问君诵，水落清香浮</p></div>
		<div class="equal mt5 box">
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
		</div>
	</div>

	<div class="center equal">
		<div class="box"> <p><p>阅谁问君诵，水落清香浮</p></p> </div>
		<div class="box mt5"> <p><p>阅谁问君诵，水落清香浮</p></p> </div>
		<div class="box mt5"> <p><p>阅谁问君诵，水落清香浮</p></p> </div>
		<div class="equal mt5 box">
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
		</div>
	</div>

	<div class="equal right">
		<div class="box">
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
		</div>
		<div class="box mt5">
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
		</div>
		<div class="box mt5">
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
		</div>
		<div class="equal mt5 box">
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
			<p>阅谁问君诵，水落清香浮</p>
		</div>
	</div>
</div>
</body>
</html>

 

主要样式

overflow: hidden;
padding-bottom: 32767px;
margin-bottom: -32767px;

 

效果图：

 

 

  • 大小: 33.8 KB
分享到：
| HTML5 兼容IE浏览器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics