三栏布局的五种实现方式及衍生实现类似的“圣杯布局”

三栏布局效果图

效果图如下：

Grid

缺点：兼容性不太友好，貌似只有IE10+才支持（有待考证）

		<style>
			.layout article div{
	            min-height: 100px;
	        }
	        .grid-content{
	            display: grid;
	            width: 100%;
	            grid-template-rows:100px;
	            grid-template-columns: 300px auto 300px;
	        }
	
	        .grid-left{
	            background-color: lightsalmon;
	        }
	
	        .grid-right{
	            background-color: lightblue;
	        }
	
	        .grid-center{
	            background-color: lightcoral
	        }
		</style>
	
 		<section class="layout grid">
                <article class="grid-content">
                    <div class="grid-left"></div>
                    <div class="grid-center">
                            <h1>这是grid</h1>
                            centercenrcentercent
                            centercenrcentercent
                            centercenrcentercent
                        </div>  
                    <div class="grid-right"></div>
                </article>
        </section>

table

缺点：当其中一列（table-cell）的高度过高，同一行的其余列均会被同等拉高，有时并不需要一行内的全部元素等高

			<style>
				.layout article div{
	            	min-height: 100px;
	        	}
				.table-content{
			            display: table;
			            width: 100%;
			        }
			
			        .table-left{
			            display: table-cell;
			            width: 300px;
			            background-color: mediumvioletred;
			        }
			
			        .table-right{
			            display: table-cell;
			            width: 300px;
			            background-color:mediumslateblue;
			        }
			
			        .table-center{
			            display: table-cell;
			            background-color:lime;
			        }
			</style>
		

			<section class="layout table">
                <article class="table-content">
                    <div class="table-left"></div>
                    <div class="table-center">
                            <h1>table</h>
                                这是table三栏
                        </div>  
                    <div class="table-right"></div>
                </article>
            </section>

flex

缺点：IE8及以下不支持

			<style>
					.layout article div{
	            		min-height: 100px;
	        		}
					.flex .left{
			            width: 300px;
			            background-color:palegreen
			        }
			
			        .flex .right{  
			            width: 300px;
			            background-color: olive
			        }
			
			        .flex .center{
			            flex: 1;
			            background-color: navy
			        }
			</style>

			<section class="layout flex">
                <article class="flex-content">
                    <div class="left"></div>
                    <div class="center">
                            <h1>flex</h1>
                            这是flex三栏
                        </div>  
                    <div class="right"></div>
                </article>
            </section>

absolute

缺点：不易于维护与布局，脱离文档流，可使用性低

			<style>
					.layout article div{
	            		min-height: 100px;
	        		}
					.absolute div{
			            position: absolute;
			        }
			
			        .layout.absolute .left{
			            left: 0;
			            width:300px;
			            background-color: pink
			        }
			
			        .layout.absolute .right{
			            right: 0;
			            width: 300px;
			            background-color: blue
			        }
			
			         .layout.absolute .center{
			            right: 300px;
			            left: 300px;
			            
			            background-color: rosybrown
			        }
			
			</style>

			<section class="layout absolute">
	            <article class="content">
	                <div class="left"></div>
	                <div class="center">
	                        <h1>这是absolute</h1>
	                        这是absolute三栏
	                    </div>  
	                <div class="right"></div>
	            </article>
	        </section>
			

float

缺点：会脱离文档流，需清除浮动

		<style>
			.layout article div{
	           	min-height: 100px;
	        }
			.layout article div{
		        min-height: 100px;
		    }
			.layout.float .left{
	            float: left;
	            width: 300px;
	            background-color: red
	        }
	        .layout.float .right{
	            float: right;
	            width: 300px;
	            background-color: blueviolet
	        }
	        .layout.float .center{
	            background-color: aqua
	        }
        </style>

		<section class="layout float">
	        <article class="content">
	            <div class="left"></div>
	            <div class="right"></div>
	            <div class="center">
	                <h1>这是float</h1>
	                这是float三栏
	            </div>    
	        </article>
	    </section>

衍生类似“圣杯布局”的效果图

Float布局实现

			<style>
			        html *{
			            padding: 0px;
			            margin: 0px;
			        }
			
			        .layout .head{
			            width: 100%;
			            background-color: blueviolet;
			        }
			        .layout .footer{            
			            width: 100%;
			            background-color:brown;
			        }
			        .layout .center{
			            width: 100%;     
			        }
			        .layout .center div{
			            min-height:400px;     
			        }
			
			        .layout .center div:nth-child(2){
			            background-color: thistle;
			            width: 200px;
			            float: right;
			        }
			        .layout .center div:first-child{
			            background-color:tan;
			            width: 200px;
			            float: left;
			        }
			        .layout .center div:nth-child(3){
			            background-color: springgreen;
			        }
			</style>

			<div class="layout">
                <header class="head">
                    这是header
                </header>
                <div class="center">
                    <div>left</div>
                    <div>right</div>
                    <div>content</div>
                </div>
                <footer class="footer">
                    这是footer
                </footer>
            </div>

Position：absolute实现

			<style>
			     html *{
			        padding: 0px;
			        margin: 0px;
			    }
		
		        .layout .head{
		            width: 100%;
		            background-color: blueviolet;
		        }
		        .layout .footer{            
		            width: 100%;
		            background-color:brown;
		        }
		        .layout .center{
		            width: 100%;
		        }
		        .layout .center div{
		            min-height:400px;   
		        }
		
		        .layout .center div:nth-child(2){
		            background-color: thistle;
		            right: 200px;
		            left: 200px;
		            position: absolute;
		        }
		        .layout .center div:first-child{
		            background-color:tan;
		            width: 200px;
		            position: absolute;
		            left: 0;
		        }
		        .layout .center div:nth-child(3){
		            background-color: springgreen;
		            position: absolute;
		            right: 0;
		            width: 200px;
		        }
			</style>

 			<div class="layout">
                <header class="head">
                    这是header
                </header>
                <div class="center">
                    <div>left</div> 
                    <div>content</div>
                    <div>right</div>
                    <div style="overflow: hidden;"></div>
                    <!-- 清除浮动 -->
                </div>
                <footer class="footer">
                    这是footer
                </footer>
            </div>

Flex实现

			<style>
		        html *{
		            margin: 0px;
		            padding: 0px;
		        }
		
		        .layout{
		            display: flex;
		            flex-direction: column;
		        }
		
		        .layout .head{
		            background-color: blueviolet;
		            flex-basis: 100px;
		        }
		        .layout .footer{
		            background-color:brown;
		            flex-basis: 100px;
		        }
		        .layout .center{
		            min-height: 500px;
		            display: flex;
		            flex-direction: row;
		           
		        }
		        .layout .center div{
		            flex:1;
		        }
		
		        .layout .center div:first-child{
		            background-color:tan;
		        }
		
		        .layout .center div:last-child{
		            background-color: thistle
		        }
		    </style>

		<div class="layout">
	        <header class="head">
	            这是header
	        </header>
	        <div class="center">
	            <div>left</div>
	            <div>content</div>
	            <div>right</div>            
	        </div>
	        <footer class="footer">
	            这是footer
	        </footer>
	    </div>

Grid实现

			<style>
		        html *{
		            padding: 0px;
		            margin: 0px;
		        }
		        .layout{
		            display: grid;
		            grid-template-rows: 100px auto 100px;
		        }
		        .layout .head{
		            background-color: blueviolet;
		        }
		        .layout .footer{            
		            background-color:brown;
		        }
		        .layout .center{
		            display: inline-grid;
		            grid-template-columns: 100px auto 100px;
		        }
		        .layout .center div{
		            min-height: 400px;
		        }
		
		        .layout .center div:nth-child(2){
		            background-color: thistle;
		        }
		        .layout .center div:first-child{
		            background-color:tan;
		        }
		        .layout .center div:nth-child(3){
		            background-color: springgreen;
		        }
			</style>

			<div class="layout">
                <header class="head">
                    这是header
                </header>
                <div class="center">
                    <div>left</div> 
                    <div>content</div>
                    <div>right</div>
                </div>
                <footer class="footer">
                    这是footer
                </footer>
            </div>