div布局

最新推荐文章于 2025-06-28 13:58:07 发布

原创最新推荐文章于 2025-06-28 13:58:07 发布 · 543 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文通过具体实例介绍了如何使用DIV进行网页布局，包括三行二列、三行三列及更复杂的多行多列布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div布局

今天刚刚学完div，想总结一下 div相当于一个盒子，div中包含了一个div，既是一个大盒子里装着一个小盒子，作用就是方便网页布局

例子：
三行二列结构：
在这里插入图片描述
HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#header{width:100%;height:120px;background:#099}
#main{width:100%;height:400px;background:#09F}
#left{width:30%;height:100%;float:left;background:#96C}
#right{width:70%;height:100%;float:left;background:#0FC}
#foot{width:100%;background:#F99}
</style>
</head>

<body>
<div id="header"> header</div>
<div id="main">
      <div id="left">left</div>
      <div id="right">right</div> 
</div>
<div id="foot">foot</div>
</body>
</html>

三行三列结构：在这里插入图片描述
HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#header{width:100%;height:120px;background:#00F}
#main{width:100%;height:400px;background:#0CC}
#left{width:30%;height:100%;float:left;background:#99C}
#middle{width:20%;height:100%;float:left;background:#3F9}
#right {width:50%;float:left;height:100%}
#foot{width:100%;height:80px;background:#93C}
</style>
</head>

<body>
<div id="header"> header</div>
<div id="main">
      <div id="left">left</div>
      <div id="right">right</div> 
      <div id="middle">middle</div>
</div>
<div id="foot">foot</div>
</body>
</html>

以此类推，多行多列代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#container{width:100%;height:40px;background:#069}
#nav{width:100%;height:40px;background:#966}
#header{width:100%;height:40px;background:#09F}
#main{width:100%;height:400px;background:#0CC}
#left{width:30%;height:100%;float:left;background:#99C}
#left_up_1{width:100%;background:#069;height:100px}
#left_up_2{width:100%;background:#963;height:100px}
#left_up_3{width:100%;background:#999;height:200px}
#middle{width:20%;height:100%;float:left;background:#3F9}
#center_up_1{width:100%;background:#3CC;height:60px}
#center_up_2{width:100%;background:#93C;height:340px}
#right {width:50%;float:left;height:100%}
#right_up_1{width:100%;background:#366;height:70px}
#right_up_2{width:100%;background:#CF9;height:80px}
#right_up_3{width:100%;background:#3F9;height:120px}
#right_up_4{width:100%;background:#036;height:130px}
#foot{width:100%;height:80px;background:#930}
</style>
</head>

<body>
<div id="container"> header 1</div>
<div id="nav"> header 2</div>
<div id="header"> header 3</div>
<div id="main">
      <div id="left">
      <div id="left_up_1">left_up_1</div>
      <div id="left_up_2">left_up_2</div>
      <div id="left_up_3">left_up_3</div>    
      </div>
      <div id="middle">
      <div id="center_up_1">center_up_1</div>
      <div id="center_up_2">center_up_2</div>
      </div>
      <div id="right">
      <div id="right_up_1">right_up_1</div>
      <div id="right_up_2">right_up_2</div>
      <div id="right_up_3">right_up_3</div>    
      <div id="right_up_4">right_up_4</div>
      </div>