这篇文章将为大家详细讲解有关HTML如何使用div元素实现布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
使用 <div> 元素的 HTML 布局
注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
这个例子使用了四个 <div> 元素来创建多列布局：
<html>
<head>
<style>
#header {
background-color:#1aaa11;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
color:#faaaff;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:#166611;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h2>天华信息教育</h2>
</div>
<div id="nav" >
第一组<br>
第二组<br>
第三组<br>
</div>
<div id="section">
<h3>这是标题</h3>
<p>
这是内容
</p>
<p>
这是内容
</p>
</div>
<div id="footer">
天华信息教育
</div>
</body>
</html>
HTML基础教程：div元素实现布局
HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
<html>
<head>
<style>
header {
background-color:#1aaa11;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
color:#faaaff;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:#166611;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<header>
<h2>天华信息教育</h2>
</header>
<nav>
第一组<br/>
第二组<br/>
第三组<br/>
</nav>
<section>
<h2>这是标题</h2>
<p>
这是内容
</p>
<p>
这是内容
</p>
</section>
<footer>
天华信息教育
</footer>
</body>
</html>
关于“HTML如何使用div元素实现布局”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
