双飞翼布局

最新推荐文章于 2024-06-01 23:21:16 发布

每一天，每一步

最新推荐文章于 2024-06-01 23:21:16 发布

阅读量72

点赞数

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/u010234868/article/details/115581783

版权

HTML/CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

圣杯布局：左、右栏宽度固定，中间栏宽度自适应，优先加载中间栏。先中间栏，再左右栏；中间栏宽度设为100%。双飞翼布局在圣杯布局基础上优化代码。
HTML代码如下：

<div class="container">
	<div class="main">
		<div class="main_w">中间栏</div> <!-- 加父级 -->
	</div>
	<div class="left">左边栏</div>
	<div class="right">右边栏</div>
</div>

CSS代码如下：

* {
	margin: 0;
	padding: 0;
}
.container {
	height: 200px;
	background-color: #eee;
	min-width: 400px;
}
.main {
	width: 100%;
	height: 200px;
	background-color: blue;
	float: left;
}
.left,
.right {
	width: 200px;
	height: 200px;
	background-color: hotpink;
	float: left;
}
.left {
	margin-left: -100%;
}
.right {
	margin-left: -200px;
}
.main_w {
	margin: 0 200px;
}