css混合布局

最新推荐文章于 2024-07-12 20:27:34 发布

MonoWx

最新推荐文章于 2024-07-12 20:27:34 发布

阅读量1k

点赞数

分类专栏： web开发文章标签： css html css混合布局

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

版权

web开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

单列加中间双列自适应

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
		<style>
			body{
				margin:0;
				padding:0;
			}
		.top{
			height:500px;
			background:black;
		}
		.main{
			width:800px;
			height:500px;
			background:pink;
			margin:0 auto;

		}
		.left{
			width:20%;
			background:yellow;
			float:left;
		}
		.right{
			width:80%;
			background: green;
			float:left;
		}
		.buttom{
			width:100px;
			height:100px;
			background: red;
			margin:0 auto;
		}
		</style>
	</head>
</html>

<body>
	<div class="top">TOP</div>
	<div class="main">
		<div class="left">LEFT</div>
		<div class="right">RIGHT</div>
	</div>
	
	<div class="buttom">BUTTOM</div>
</body>

效果显示：

总结：

1.混合布局：我们可以把一列布局加入“左”和“右”改造为混合布局。
2.在中部mian中加入子div 分别是（左，右）。 然后分别在style中加入“.left和.right”的样式！
3.注“left和right”都要加浮动“float”
4.还可以在混合布局下进行更复杂的混合布局
5.可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局

多列嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
		<style>
			body{
				margin:0;
				padding:0;
			}
		.top{
			height:500px;
			background:black;
		}
		.main{
			width:800px;
			height:500px;
			background:pink;
			margin:0 auto;

		}
		.left{
			width:20%;
			background:yellow;
			float:left;
		}
		.right{
			width:80%;
			background: green;
			float:left;
		}
		.sub_l{
			width:50%;
			background:blue;
			float:left;
		}
		.sub_r{
			width:50%;
			background:red;
			float:left;
		}
		.buttom{
			width:100px;
			height:100px;
			background: red;
			margin:0 auto;
		}
		</style>
	</head>
</html>

<body>
	<div class="top">TOP</div>
	<div class="main">
		<div class="left">LEFT</div>
		<div class="right">
			<div class="sub_l">SUBL</div>
			<div class="sub_r">SUBR</div>
		</div>
	</div>
	
	<div class="buttom">BUTTOM</div>
</body>

MonoWx

关注

0
点赞
踩
0

收藏

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

单列加中间双列自适应 body{ margin:0; padding:0; } .top{ height:500px; background:black; } .main{ width:800px; height:500px; background:pink; margin:0 auto;
复制链接

扫一扫

专栏目录