三栏布局

by Dong Shelton

HTML

<div class="frame">
    <div class="double-wing-container">
    	<div class="double-wing-middle">
    		<div class="double-wing-main">
    			Double wing main.  
    		</div>
    	</div>
    	<div class="double-wing-left">
    		Double wing left.  
    	</div>
    	<div class="double-wing-right">
    		Double wing right
    	</div>
    </div>

    <div class="grail-container">
    	<div class="grail-middle">
    		Grail main
    	</div>
    	<div class="grail-left">
    		Grail left
    	</div>
    	<div class="grail-right">
    		Grail right
    	</div>
    </div>

    <div class="flex-container">
    	<div class="flex-middle">
    		Flex main
    	</div>
    	<div class="flex-left">
    		Flex left
    	</div>
    	<div class="flex-right">
    		Flex right
    	</div>
    </div>

    <div class="absolute-container">
    	<div class="absolute-middle">
			Absolute main
    	</div>
    	<div class="absolute-left">
    		Absolute left
    	</div>
    	<div class="absolute-right">
    		Absolute right
    	</div>
    </div>

    <div class="table-cell-container">
    	<div class="table-cell-left">
    		 Table cell left
    	</div>
    	<div class="table-cell-middle">
			 Table cell main
    	</div>
    	<div class="table-cell-right">
    		 Table cell right
    	</div>
    </div>
</div>

CSS

.frame {
	width: 400px;
	padding: 0 10px;
	resize: horizontal;
	border: 1px solid black;
	overflow: auto;
}

.double-wing-container {
	overflow: hidden;
}
.double-wing-container>div {
	position: relative;
	float: left;
	height: 100%;
}
.double-wing-middle {
	width: 100%;
}
.double-wing-left {
	width: 200px;
	background-color: orange;
	margin-left: -100%;
}
.double-wing-right {
	width: 100px;
	background-color: red;
	margin-left: -200px;
}
.double-wing-main {
	height: 100%;
	margin: 0 200px;
	background-color: pink;
	overflow: hidden;
}


.grail-container {
	overflow: hidden;
	padding: 0 200px 0 200px;
}
.grail-container>div {
	position: relative;
	float: left;
	height: 100%;
}
.grail-middle {
	width: 100%;
	background-color: blue;
}
.grail-left {
	width: 200px;
	background-color: green;
	margin-left: -100%;
	left: -200px;
}
.grail-right {
	width: 200px;
	background-color: brown;
	margin-left: -200px;
	right: -200px;
}

.flex-container {
	display: flex;
}
.flex-container>div {
	height: 100%;
}
.flex-left {
	width: 200px;
	background-color: yellow;
	order: 1;
	flex-shrink: 0;
}
.flex-middle {
	width: 100%;
	background-color: gray;
	order: 2;
}
.flex-right {
	width: 200px;
	background-color: red;
	order: 3;
	flex-shrink: 0;
}

.absolute-container {
	position: relative;
	overflow: hidden;
}
.absolute-container>div {
	height: 100%;
}
.absolute-left {
	float: left;
	width: 200px;
	background-color: blue;
}
.absolute-middle {
	position: absolute;
	left: 200px;
	right: 200px;
	top: 0;
	bottom: 0;
	background-color: pink;
}
.absolute-right {
	float: right;
	width: 200px;
	background-color: brown;
}

.table-cell-container {
	position: relative;
	overflow: hidden;
}
.table-cell-container>div {
	height: 100%;
	display: table-cell;
}
.table-cell-left {
	width: 200px;
	min-width: 200px;
	background-color: red;
}
.table-cell-middle {
	margin: 0 200px;
	width: 100%;
	background-color: brown;
}
.table-cell-right {
	min-width: 200px;
	width: 200px;
	background-color: yellow;
}