欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css常见的布局方式

程序员文章站 2022-04-30 11:33:04
...

一,两列布局

HTML代码

<body>
    <div class="left">ccc</div>
	<div class="right">cccccc</div>
</body>
  1. 左边固定宽度右边自适应
  • 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>

 

 

相关标签: css布局