Div+CSS构建三行三列框架

最新推荐文章于 2024-07-24 14:22:29 发布

阮靓仔

最新推荐文章于 2024-07-24 14:22:29 发布

阅读量4.1k

点赞数

分类专栏： Web前端开发文章标签： html css

本文链接：https://blog.csdn.net/qq_19286785/article/details/108716735

版权

Web前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

要构建的框架如图所示：
在这里插入图片描述
方法一：使用div的浮动窗口属性
显然，页面布局到下是三层结构，中间的div包含三个小div；因为div是块元素，占用文档流的一行空间，要使一行中出现多个div，需要为div设置浮动样式。代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#header{
				background-color: aquamarine;
				height: 120px;
			}			
			#main{
				background-color: antiquewhite;
				height: 120px;
			}
			
			#footer{
				background-color: blueviolet;
				height: 120px;
			}
			#left{
				width: 30%;
				height: 120px;
				background-color: burlywood;
				float: left;
				}
			#center{
				width: 40%;
				height: 120px;
				background-color: brown;
				float: left;
				
				
			}
			#right{
				width: 30%;
				height: 120px;
				background-color: chartreuse;
				float: right;
				
			}			
		</style>
		<title></title>
	</head>
	<body>
		<div id="header">			
		</div>		
		<div id="main">
			
			<div id="left">	
					左窗口
			</div>
			
			<div id="center">
				中间窗口
			</div>	
			
			<div id="right">				
				右窗口
			</div>
			
					
		</div>		
		<div id="footer">			
		</div>		
	</body>
</html>

方法二：因为div被设置成浮动元素之后，就不会占用文档流中的位置，所以是否可以让左边的div向左浮动，右边的div向右浮动，中间的div不设置浮动，，左右两边div悬浮与自己div的上方，而仅仅设置中间div的padding填充属性。具体代码如下：
这里要注意的是，三个div的放置顺序，一定要是先左右两边的div，然后放置中间的div，不然会引起混乱。（我的理解是正常元素可能会忽略浮动元素的位置，但是浮动元素并不能忽略正常元素的位置，如果理解错误，以后在改正）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#header{
				background-color: aquamarine;
				height: 120px;
			}			
			#main{
				background-color: antiquewhite;
				height: 120px;
			}
			
			#footer{
				background-color: blueviolet;
				height: 120px;
			}
			#left{
				width: 30%;
				height: 120px;
				background-color: burlywood;
				float: left;
			}
			#center{
				/*width: 40%;*/
				height: 120px;
				background-color: brown;
				padding-left: 0px 30%;/*左右两边填充30%的位置，用来显示两边的div*/
				
			}
			#right{
				width: 30%;
				height: 120px;
				background-color: chartreuse;
				float: right;
			}			
		</style>
		<title></title>
	</head>
	<body>
		<div id="header">			
		</div>		
		<div id="main">
			<div id="left">				
			</div>
			<div id="right">				
			</div>
			<div id="center">				
			</div>			
		</div>		
		<div id="footer">			
		</div>		
	</body>
</html>

阮靓仔

关注

0
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
Div+CSS构建三行三列框架

要构建的框架如图所示：方法一：使用div的浮动窗口属性显然，页面布局到下是三层结构，中间的div包含三个小div；因为div是块元素，占用文档流的一行空间，要使一行中出现多个div，需要为div设置浮动样式。代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style type="text/css"> #header{ background-color
复制链接

扫一扫

专栏目录