DIV实现的BorderLayout布局

最新推荐文章于 2022-04-15 21:25:03 发布

iteye_8698

最新推荐文章于 2022-04-15 21:25:03 发布

阅读量227

点赞数

分类专栏： AJAX

本文链接：https://blog.csdn.net/iteye_8698/article/details/82281095

版权

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏



<!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>