总结：中间自适应、两边固定的三列布局合集

最新推荐文章于 2024-01-21 13:37:53 发布

梁梁LYQF

最新推荐文章于 2024-01-21 13:37:53 发布

阅读量247

点赞数

分类专栏：前呀那个端文章标签： html css

本文链接：https://blog.csdn.net/weixin_44817017/article/details/89428964

版权

前呀那个端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

布局的关键是对浮动和定位的理解；
1、浮动——float
float属性使元素浮动在文本或其他元素上。
只要让一个设置了宽度的元素浮动，在正常情况下显示在它下面的内容（没有设置宽度）就会浮动到它的周围（左/右/下方）；
可以让两个都指定了宽度的元素都float，实现两个元素并排在一起；
注意：
浮动元素会让接下来的内容围绕在它周围，但它并不会影响父元素或其他祖先元素的高度，就这一点来说，它不属于文档流的一部分，只有普通文档流中的内容才会影响父元素的高度。
2、相对定位——position：relative；
每一个元素在页面的文档流中都有一个自然位置，相对于该自然位置对元素进行移动即为相对定位；
position：relative；
top/right/bottom/left: d ;
其中d为相对原始位置向上/右/下/左偏移的距离；
注意：
其他元素不会受到被定位元素的偏移影响，仍然排列在原来的位置，因此有可能会发生重叠的现象；
3、绝对定位——position：absolute；
对元素进行绝对定位，是指定它相对于body或最近的已定位祖先元素的精确定位，可以让元素脱离正常的文档流；
绝对定位与相对定位的区别：
绝对定位的元素不会在原先的位置留下空白；
注意：
对于绝对定位的元素，其他元素不会围绕在它周围；
也可以说，其他元素不知道绝对定位元素的存在，绝对定位元素也不知道其他元素的存在；
4、多栏布局就是利用float、定位的特点在页面上对元素进行布局；
5、三列布局（中间自适应）
方法一：

<!DOCTYPE html>
<html>
<head>
	<title>三列布局1.0利用负的外边距实现</title>
	<style type="text/css">
	*{
		box-sizing: border-box;
		margin: 0;
	}
	/*如果把左浮动left改成右浮动right，仍可以得到三列布局，但是顺序相反*/
	.box{
		width: 100%;
		float: left;
	}

	/*中间一栏,利用左右边距撑开*/
	.bbox{
		margin: 0 210px;
		background-color: yellow;  
	}
	/*左边*/
	.box1{
		background-color: green;
		width: 200px;
		float: left;
		margin-left: -100%;
		height: 100%;

	}
	/*右边*/
	.box2{
		background-color: lightblue;
		width: 200px;
		float: left;
		margin-left: -200px;  /*margin-left=-width*/
	}
	</style>
</head>

<body>
	<div class="box">
		<div class="bbox">
			<h2>bbox</h2>
			<p>三栏相互关联，真正意义上的(中间)自适        应，有一定的抗性——布局不易受内部影响</p>	
		</div>	
	</div>
	
	<div class="box1">
		<p>box1</p>
	</div>
	
	<div class="box2">
		<p>box2</p>
	</div>
	
</body>
</html>

在这里插入图片描述
方法二

<!DOCTYPE html>
<html>
<head>
	<title>三列布局2.0利用绝对定位</title>
	<style type="text/css">
	*{
		box-sizing: border-box;
		margin: 0;
	}
	.box{
		width: 200px;
		background-color: green;
		position: absolute;
		left: 0;
		top: 0;
	}
	.box1{
		margin: 0 230px;/*此时的margin不是与左右两栏的距离，而是与body的距离*/
		background-color: yellow;
	}
	.box2{
		width: 200px;
		background-color: lightblue;
		position: absolute;
		right: 0;
		top: 0;
	}
	</style>
</head>

<body>
	<div class="box">
		<p>box</p>
	</div>
	
	<div class="box1">
		<h2>box1</h2>
		<p>利用绝对定位，确定左右两栏的位置，再利用外边距撑开中间这里栏；由于是绝对定位，所以被定位的元素与其周围的元素相互不知道彼此，故这时的margin是到body的外边距。</p>
	</div>
	
	<div class="box2">
		<p>box2</p>
	</div>
	
</body>
</html>

在这里插入图片描述
方法三：

<!DOCTYPE html>
<html>
<head>
	<title>三列布局3.0利用浮动</title>
	<style type="text/css">
	*{
		box-sizing: border-box;
		margin: 0;

	}
	.box{
		width: 200px;
		background-color: green;
		float: left;
	}
	.box1{
		margin: 0 230px;/*此时的margin不是与左右两栏的距离，而是与body的距离*/
		background-color: yellow;
	}
	.box2{
		width: 200px;
		background-color: lightblue;
		float: right;	
	}
	</style>
</head>
<body>
	<div class="box">
		<p>box</p>
	</div>
	
	<div class="box2">
		<p>box2</p>
	</div>
	
	<div class="box1">
		<h2>box1</h2>
		<p>此布局的关键html中三栏的顺序，是要把中间一栏写在
		最下面.这是由于浮动的特性是，浮动元素后面的元素浮在其周围。</p>
	</div>

</body>
</html>

在这里插入图片描述
方法四：

<!DOCTYPE html>
<html>
<head>
	<title>三列布局4.0</title>
	<style type="text/css">
	*{
		box-sizing: border-box;
		margin: 0;
	}
	.box{
		width: 200px;
		background-color: green;
		float: left;
	}
	.box1{
		margin: 0 230px;/*此时的margin不是与左右两栏的距离，而是与body的距离*/
		background-color: yellow;
	}
	.box2{
		width: 200px;
		background-color: lightblue;
		position: absolute;
		right: 0;
		top: 0;

	}
	</style>
</head>
<body>
	<div class="box">
		<p>box</p>
	</div>
	<div class="box1">
		<h2>box1</h2>
		<p>利用浮动+绝对定位</p>
	</div>
	<div class="box2">
		<p>box2</p>
	</div>
</body>
</html>

在这里插入图片描述

梁梁LYQF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结：中间自适应、两边固定的三列布局合集

布局的关键是对浮动和定位的理解；1、浮动——floatfloat属性使元素浮动在文本或其他元素上。只要让一个设置了宽度的元素浮动，在正常情况下显示在它下面的内容（没有设置宽度）就会浮动到它的周围（左/右/下方）；可以让两个都指定了宽度的元素都float，实现两个元素并排在一起；注意：浮动元素会让接下来的内容围绕在它周围，但它并不会影响父元素或其他祖先元素的高度，就这一点来说，它不属于文...
复制链接

扫一扫

专栏目录