CSS-固定宽度布局

最新推荐文章于 2022-01-07 11:42:05 发布

娃娃救葫芦爷

最新推荐文章于 2022-01-07 11:42:05 发布

阅读量707

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/cc098818/article/details/99410465

版权

CSS基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了CSS布局中的两种实现固定宽度方法：（1）利用绝对定位实现布局，（2）通过浮动元素技巧来创建固定宽度的页面布局。分别展示了各自的运行结果。

摘要由CSDN通过智能技术生成

CSS 布局
在这里插入图片描述
（1）绝对定位法


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位法</title>
<style type="text/css">
	body{
		text-align: center;
	}
	
	#head,#container,#content,#side,#foot{
		margin:20px auto 20px auto;
		padding:20px 0px 20px 0px;
		border: 1px solid red;
	}
	
	#head,#container,#foot{
		width: 900px;
	}
	
	#container{
		border:0px;
		position: relative;
		height: 250px;
	}
	
	#content{
		position: absolute;
		width: 700px;
		height: 200px;
	}
	
	#side{
		margin-left: 750px;
		height: 100px;
	}
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
	<div id="content">content</div>
	<div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
</html>

运行结果：
在这里插入图片描述
（2）浮动法


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动法</title>
<style type="text/css">
	body{
		text-align: center;
	}
	
	#head,#container,#content,#side,#foot{
		margin:20px auto 20px auto;
		padding:20px 0px 20px 0px;
		border: 1px solid red;
	}
	
	#head,#container,#foot{
		width: 900px;
	}
	
	#container{
		border:0px;
	}
	
	#content{
		float:left;
		width: 700px;
		height: 200px;
	}
	
	#side{
		float:right;
		width: 180px;
		margin-left: 10px;
		height: 100px;
	}
	
	#foot{
		clear: both;
	}
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
	<div id="content">content</div>
	<div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
</html>

运行结果：
在这里插入图片描述

娃娃救葫芦爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-固定宽度布局

CSS 布局（1）绝对定位法<!DOCTYPE html><html><head><meta charset="UTF-8"><title>绝对定位法</title><style type="text/css"> body{ text-align: center; } #head,#...
复制链接

扫一扫

专栏目录