`
joeblow
  • 浏览: 176089 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DIV实现的BorderLayout布局

    博客分类：
  • AJAX
阅读更多 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;border:0;">
 <head>
  <title>DIV BorderLayout Test</title>
 </head>
<style type="text/css">
.layout-north{height:10%;}
.layout-middle{height:70%;background:yellow;}
.layout-west{float:left;width:20%;height:100%;background:green;}
.layout-center{float:left;width:70%;height:100%;background:grey;}
.layout-east{float:right;width:10%;height:100%;background:red;}
.layout-south{height:20%;}
</style>
 <body style="height:100%;margin:0;">
	<div class="layout-north">
		north
		<br>
		north
	</div>
	<div class="layout-middle">
		<div class="layout-west">
			west
		</div>
		<div class="layout-center" >
			center
		</div>
		<div class="layout-east">
			east
		</div>
	</div>
	<div class="layout-south">
		south
	</div>
 </body>
</html>
分享到：
| some firefox add-ons
评论
发表评论

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

相关推荐

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