css布局测试

MonoWx

于 2018-01-06 17:27:28 发布

阅读量343

点赞数

分类专栏： web开发文章标签： css html

本文链接：https://blog.csdn.net/qq_32863631/article/details/78990297

版权

web开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

3列布局-特殊案例
左右列固定宽度，中间列自适应。
左侧绝对定位：position：absolute;left:0;top:0;
右侧绝对定位：position：absolute;right:0;top:0;
中间宽度定义去掉，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中间空一点出的话，增加margin属性值便可以实现）
左右两侧布局固定宽度，中间部分宽度自适应。则需要采用绝对定位来实现，把左右设置为绝对定位
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
		<style>
		body{
			margin:0;
			padding:0;
		}
		.left{
			width:200px;
			height:500px;
			background:red;
			position:absolute;
			left:0;
			top:0;
		}
		.middle{
			height:500px;
			background:blue;
			margin:0 300px 0 200px;
		}
		.right{
			width:300px;
			height:500px;
			background:pink;
			position:absolute;
			right:0;
			top:0;
		}
		</style>
	</head>

<body>
	<div class="left">left</div>
	<div class="middle">middle</div>
	<div class="right">right</div>
</body>
</html>
样例显示效果：

MonoWx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局测试

3列布局-特殊案例左右列固定宽度，中间列自适应。左侧绝对定位：position：absolute;left:0;top:0;右侧绝对定位：position：absolute;right:0;top:0;中间宽度定义去掉，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中间空一点出的话，增加margin属性值便可以实现）左右两侧布局固定宽度，中间部分宽度
复制链接

扫一扫

专栏目录