Skip to content

Instantly share code, notes, and snippets.

@huguangju
Created March 12, 2017 08:23
Show Gist options
  • Save huguangju/86604b972a18b3eae8c8ee0e9391338a to your computer and use it in GitHub Desktop.
Save huguangju/86604b972a18b3eae8c8ee0e9391338a to your computer and use it in GitHub Desktop.
圣杯布局和双飞翼布局等3栏布局

圣杯布局

<div class="container">
    <div class="main"></div>
	<div class="sub"></div>
	<div class="extra"></div>
</div>
body {
	min-width: 600px; /* 2*sub + extra */
}
.container {
	padding-left: 210px;
	padding-right: 190px;
}
.main {
	float: left;
	width: 100%;
	height: 300px;
	background-color: rgba(255, 0, 0, .5);
}
.sub {
	position: relative;
	left: -210px;
	float: left;
	width: 200px;
	height: 300px;
	margin-left: -100%;
	background-color: rgba(0, 255, 0, .5);
}
.extra {
	position: relative;
	right: -190px;
	float: left;
	width: 180px;
	height: 300px;
	margin-left: -180px;
	background-color: rgba(0, 0, 255, .5);
}

双飞翼布局

<div class="main-wrapper">
    <div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrapper {
	float: left;
	width: 100%;
}
.main {
	height: 300px;
	margin-left: 210px;
	margin-right: 190px;
	background-color: rgba(255, 0, 0, .5);
}
.sub {
	float: left;
	width: 200px;
	height: 300px;
	margin-left: -100%;
	background-color: rgba(0, 255, 0, .5);
}
.extra {
	float: left;
	width: 180px;
	height: 300px;
	margin-left: -180px;
	background-color: rgba(0, 0, 255, .5);
}

参考:

In Search of the Holy Grail 浅析圣杯布局和双飞翼布局

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment