css二列布局和多列布局

最新推荐文章于 2025-06-11 14:55:28 发布

MonoWx

最新推荐文章于 2025-06-11 14:55:28 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_32863631/article/details/78988921

web开发专栏收录该内容

22 篇文章

订阅专栏

本文探讨了如何使用CSS实现二列和多列布局。通过设置元素的float属性，展示了创建稳定布局的代码示例，进一步讨论了多列布局的实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置为float的形式

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/csss; charset=utf-8" />
	<style>
		.left{
			width:20%;
			height:500px;
			float:left;
			background:#ccc;
		}
		.right{
			width:20%;
			height:500px;
			float:right;
			background:#ddd;
		}
		.center{
			width:20%;
			height:500px;
			background:red;
			left:0;
			right:0;
			margin:0 auto;
		}
	</style>
</head>


<body>
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>

</body>

</html>

效果如下图

布局测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
		<style>
			.main{
				width:800px;
				margin:0 auto;
			}
			.left{
				width:30%;
				height:500px;
				float:left;
				background:red;
			}
			.right{
				width:70%;
				height:500px;
				left:right;
				background:pink;
			}
		</style>

</html>

<body>
<div class="main">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

多列布局代码

<DOCTYPE html>
	<html>
		<meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
		<style>
			body{
				margin:0;
				padding:0;
			}
			.left{
				width:33.33%;
				height:500px;
				background:red;
				float:left;
			}
			.middle{
				width:33.33%;
				height:500px;
				background: pink;
				float: left;
			}
			.right{
				width:33.33%;
				height: 500px;
				background:green;
				float:left;
			}
		</style>
	</html>

	<body>
		<div class="left">left</div>
		<div class="middle">middle</div>
		<div class="right">right</div>
	</body>

样例测试如图：