HTML&CSS三列布局

最新推荐文章于 2024-05-17 07:28:12 发布

六月u6

最新推荐文章于 2024-05-17 07:28:12 发布

阅读量1w

点赞数 4

分类专栏：前端定位 position 布局文章标签：基础 html 三列布局

本文链接：https://blog.csdn.net/u011121046/article/details/51842564

版权

本文介绍了HTML和CSS中创建三列布局的三种方法：1) 使用负margin实现，左右列宽度固定，中间列自适应；2) 利用绝对定位调整元素位置；3) 混合布局，先构建一列结构，再通过分割和定位完成三列布局。内容涵盖头、主体和底部的布局设置。

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

1.利用margin值为负数

左右宽度固定中间自适应。补充：background-color填充：content、padding、border。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.main{
			background-color: black;
			padding:0 300px;
			height: 700px;
		}
		.main-left{
			width: 300px;
			height: 500px;
			background-color: #98FF1A;
			float: left;
			margin-left:-300px;
		}		
		.main-center{
			background-color: #8E8DCC;
			height: 500px;
		}
		.main-right{
			width: 300px;
			height: 500px;
			background-color:#7CC0FF;
			float: right;
			margin-right: -300px;
		}
	
		</style>
	</head>
	<body>
		<div class="main">
			<div class="main-left"></div>
			<div class="main-right"></div>
			<div class="main-center"></div>
		</div>
	</body>
</html>

2.利用绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style t

最低0.47元/天解锁文章

六月u6

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
HTML&CSS三列布局

1.利用margin值为负数左右宽度固定中间自适应测试页 body{ margin: 0; padding: 0; } .main{ background-color: black; padding:0 300px; height: 700px; } .main-left{ width: 300px; h
复制链接

扫一扫