div完成田字格布局

最新推荐文章于 2024-06-13 22:03:48 发布

PromiseXuu

最新推荐文章于 2024-06-13 22:03:48 发布

阅读量4.2k

点赞数 1

分类专栏： HTML 文章标签： html 布局

前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ

本文链接：https://blog.csdn.net/XZZ2222/article/details/52195554

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

对于初始HTML的宝宝们来说，写一个简单的网页就是成功的第一步。今天完成了作业：利用div完成田字格布局。代码如下：

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>田字格布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
#ltop
{
	width:49%;
	height:200px;
	background:red;
    float:left;
}

#rtop
{
	width:49%;
	height:200px;
	background:blue;
	float:right;
}

#lbottom
{
	width:49%;
	height:200px;
	background:green;
	float:left;
	clear:left;
}

#rbottom
{
	width:49%;
	height:200px;
	background:yellow;
	float:right;
}
</style>
</head>
    <body>
    	
    		
    			<div id="ltop">左上</div>
    			<div id="rtop">右上</div>
                <div id="lbottom">左下</div>
				<div id="rbottom">右下</div>
    	
    </body>
</html>

注：div宽度默认值为100%，而高度默认值为10px。

显示如下：