css常见的布局方式

最新推荐文章于 2023-04-15 21:01:35 发布

满满阳光

最新推荐文章于 2023-04-15 21:01:35 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css布局

本文链接：https://blog.youkuaiyun.com/love_dog_bitch/article/details/87929198

css 专栏收录该内容

3 篇文章

订阅专栏

一，两列布局

HTML代码

<body>
    <div class="left">ccc</div>
	<div class="right">cccccc</div>
</body>

左边固定宽度右边自适应

position+margin

* {
	margin: 0px;
    padding: 0px;
}
.left{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100px;;
	background-color: red;
}
.right{
	margin-left: 110px;
	background-color: green;
}

float+overflow

* {
	margin: 0px;
	padding: 0px;
}
.left{
	float: left;
	width: 100px;
	background-color: red;
}
.right{
	overflow: hidden;
	background-color: green;
}

flex

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			.main {
				display: flex;
			}
			.left{
				width: 100px;
				background-color: red;
			}
			.right{
				flex: 1;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left">ccc</div>
			<div class="right">cccccc</div>
		</div>
		
	</body>
</html>

右边宽度固定左边自适应

flex

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			.main {
				display: flex;
			}
			.left{
				
				flex: 1;
				background-color: green;
			}
			.right{
				width: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left">ccc</div>
			<div class="right">cccccc</div>
		</div>
		
	</body>
</html>

float+margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			.main {
				width: 100%;
			}
			.left{
				margin-right:200px;
				background-color: red;
				height:100px;
			}
			.right{
				float: right;
				width: 200px;
				background-color: green;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="right">cccccc</div>
			<div class="left">ccc</div>
		</div>
		
	</body>
</html>

position+margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			.main {
				width: 100%;
			}
			.left{
				margin-right:200px;
				background-color: red;
				height:100px;
			}
			.right{
				position: absolute;
				right: 0;
				top: 0;
				width: 200px;
				background-color: green;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="right">cccccc</div>
			<div class="left">ccc</div>
		</div>
		
	</body>
</html>

二，三列布局

三列布局通常是两侧定宽，中间自适应，布局方案类似于二列布局

position+margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			.main {
				width: 100%;
			}
			.left{
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				background-color: green;
				height:100px;
			}
			.middle {
				height: 100px;
				margin: 0px 200px;
				background-color: black;
			}
			.right{
				position: absolute;
				right: 0;
				top: 0;
				width: 200px;
				background-color: green;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left">ccc</div>
			<div class="middle">fff</div>
			<div class="right">cccccc</div>
		</div>
		
	</body>
</html>

float+overflow+margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			.main {
				width: 100%;
			}
			.left{
				float: left;
				width: 200px;
				background-color: green;
				height:100px;
			}
			.middle {
				height: 100px;
				margin: 0px 200px;
				background-color: black;
			}
			.right{
				float: right;
				overflow: auto;
				width: 200px;
				background-color: green;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left">ccc</div>
			<div class="right">cccccc</div>
			<div class="middle">fff</div>
		</div>
		
	</body>
</html>