圣杯布局和双飞翼布局

最新推荐文章于 2024-10-02 15:35:50 发布

Love_vermouth

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量130

点赞数

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

本文链接：https://blog.csdn.net/u010238381/article/details/79605342

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

左右固定，中间自适应。中间栏要放在文档流前面以优先渲染。

假设左固定300px，右固定200px

圣杯布局

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>圣杯布局</title>
	<link rel="stylesheet" href="style1.css" />
</head>

<body>

	<div class="container">
		<div class="middle">中</div>
		<div class="left">左</div>
		<div class="right">右</div>
	</div>
	
</body>
</html>

css代码：

body, 
div {
	padding: 0;
	margin: 0;
}

div {
	height:150px;
}


.container {
	padding: 0 200px 0 300px;
}


.left {
	width: 300px;
	background-color: orange;
	float: left;
	margin-left: -100%;
	position: relative;
	left: -300px;
}

.right {
	width: 200px;
	background-color: blue;
	float: left;
	margin-left: -200px;
	position: relative;
	right: -200px;
}

.middle {
	width: 100%;
	float: left;
	background-color: yellow;
}

双飞翼布局

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>双飞翼布局</title>
	<link rel="stylesheet" href="style2.css" />
</head>

<body>

	<div class="container">
		<div class="middle">
			<div class="inner">中</div>
		</div>
		<div class="left">
			左
			<p>第二行</p>
		</div>
		<div class="right">右</div>
	</div>
	
</body>
</html>

css代码：

body, 
div {
	padding: 0;
	margin: 0;
}


.container {
	overflow: hidden;
}

.left {
	width: 300px;
	background-color: orange;
	float: left;
	margin-left: -100%;
}

.right {
	width: 200px;
	float: left;
	margin-left: -200px;
	background-color: blue;
}

.middle {
	width: 100%;
	float: left;
	background-color: yellow;
}


.middle .inner {
	margin: 0 200px 0 300px;
}


.middle,
.left,
.right {
	padding-bottom: 9999px;
	margin-bottom: -9999px; // 假等高
}