宽度自适应布局

最新推荐文章于 2023-11-04 18:58:10 发布

锅王

最新推荐文章于 2023-11-04 18:58:10 发布

阅读量608

点赞数 1

分类专栏： css 文章标签：宽度自适应布局实现方式

本文链接：https://blog.csdn.net/qq_34099161/article/details/51596883

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

自适应布局是一种很常见的布局方式，现将常见的几种实现方式列下：

1：利用float

左右两div分别左右浮动，不再占用文档流，块元素div.main自动占据整行，然后给main添加左右margin分别为左右两块元素的宽，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.con{width: 500px;
				height: 100px;
			}
			div{
				height: 100px;
			}
			.left{
				float: left;
				width: 100px;
				background: dodgerblue;
			}
			.right{
				float: right;
				width: 100px;
				background: peru;
			}
			.main{
				background: yellowgreen;
				margin: 0 100px;
			}
			
		</style>
	</head>
	<body>
<div class="con">
	
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="main">main</div>
	
</div>
	</body>
</html>

2、利用绝对定位（图如上）

左右两个div分别绝对定位到父元素左右，中间div.mian设置margin分别为左右两元素的宽

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.con{width: 500px;
				height: 100px;
				position: relative;
			}
			div{
				height: 100px;
			}
			.left{
				position: absolute;
				left: 0;
				width: 100px;
				background: dodgerblue;
			}
			.right{
				position: absolute;
				right: 0;
				width: 100px;
				background: peru;
			}
			.main{
				background: yellowgreen;
				margin: 0 100px;
			}
			
		</style>
	</head>
	<body>
<div class="con">
	
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="main">main</div>
	
</div>
	</body>
</html>

3、利用负的margin

三元素分别浮动，中间元素width：100%

然后在利用负的margin给left和right定位，

最后给div.main的子元素设置左右margin分别为左右俩元素的宽度

实现效果如图一。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.con{width: 500px;
				height: 100px;
			}
			div{
				height: 100px;
			}
			.left{
				float: left;
				width: 100px;
				background: dodgerblue;
				margin-left: -100%;
			}
			.right{
				float: left;
				width: 100px;
				background: peru;
				margin-left: -100px;
			}
			.main{
				width: 100%;
				float: left;
				background: yellowgreen;
			}
			.son{
				margin:0 100px;
			}
			
		</style>
	</head>
	<body>
<div class="con">
	<div class="main">
		<div class="son">main</div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
	
	
</div>
	</body>
</html>

锅王

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
宽度自适应布局

自适应布局是一种很常见的布局方式，现将常见的几种实现方式列下：1：利用float左右两div分别左右浮动，不再占用文档流，块元素div.main自动占据整行，然后给main添加左右margin分别为左右两块元素的宽，代码如下：.con{width: 500px;height: 100px;}div{height: 100px;}.le
复制链接

扫一扫

专栏目录