CSS实现三列自适应的两种方法

最新推荐文章于 2024-05-05 18:28:16 发布

henouren

最新推荐文章于 2024-05-05 18:28:16 发布

阅读量764

点赞数 1

分类专栏： web前端学习 CSS 开发文章标签：前端 HTML CSS 布局自适应

本文链接：https://blog.csdn.net/henouren/article/details/78222834

版权

web前端同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

开发

22 篇文章 0 订阅

订阅专栏

CSS

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实现三列自适应布局</title>
		<style type="text/css">
			/*方法一：绝对定位法
			 将左右两侧分别使用绝对定位，通过left/right使之分别固定在左右两侧，并设置宽度
			 设置中间部分的margin为左侧的宽度
			*/
			*{
				margin: 0;
				padding: 0;
				height: 500px;
			}
			.left{
				position: absolute;
				top: 0;
				left: 0;
				width: 30%;
				background: #69A6D1;
			}
			.right{
				position: absolute;
				top: 0;
				right: 0;
				width: 30%;
				background: #ADADAD;
			}
			.main{
				background: #99CCFF;
				margin: 0 30%;
			}
			
			/*方法二：浮动法
			 设置左右两栏分别左右浮动
			 * */
			/*
			.left{
				width: 30%;
				float: left;
				background: #69A6D1;
			}
			.right{
				width: 30%;
				float: right;
				background: #ADADAD;
			}
			.main{
				width: 40%;
				float: left;
				background: #99CCFF;
			}*/
		</style>
	</head>
	<body>
			<div class="left">
				left
			</div>
			<div class="main">
				main
			</div>
			<div class="right">
				right
			</div>
	</body>
</html>

效果图：

以上！

henouren

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS实现三列自适应的两种方法

实现三列自适应布局 /*方法一：绝对定位法将左右两侧分别使用绝对定位，通过left/right使之分别固定在左右两侧，并设置宽度设置中间部分的margin为左侧的宽度 */ *{ margin: 0; padding: 0; height: 500px; } .left{ positio
复制链接

扫一扫