Three-column layout, which is a relatively common page layout, provides 2 ways to implement it:
Method 1:
Using the latest CSS3 telescopic box layout properties, can be easily achieved (three columns, such as high, the default is three columns, such as High Yo!) ）
| The code is as follows | Copy Code |
| <style> . Header,.footer{height:100px;line-height:40px;font-weight:bold;background-color: #bbb; text-align:center;} . main{}. Content{overflow:hidden;background-color: #a4e88c;} . Left{width:100px;background-color: #E79F6D; Right{width: 100px;background-color: #7BD;} . Left,.right,.content{min-height:200px;_height: 200px;} /* Telescopic Box layout */Flex-container{display:flex}. Content{flex:1;}. Left{order:-1} </style> <div class= "Header" > Page Head 100px </div> <div class= "Main Flex-container" > <div class= "Content" > Middle Self adaptation </div> <div class= "Left" > Left width 100px left width 100px left width 100px </div> <div class= "Right" > Right width 150px </div> </div> <div class= "Footer" > Footer 100px </div> |
|
Hint: You can modify some of the code before running.
Method 2: (regardless of the three-column loading sequence, the middle bar without extra layer)
The main use is to trigger the BFC of modern browsers and trigger the old version of IE browser Haslayout properties to achieve all browser-compatible middle column width Adaptive layout, the source code is as follows:
| The code is as follows | Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <body> <style type= "Text/css" > *{margin:0;padding:0;} body{min-width:450px}. Fl{float:left; Fr{float: Right;} . clear{clear:both; clearfix{overflow:hidden;_zoom:1; Clearfix:after{display:block;content: ""; width:0;height:0;overflow:hidden;clear:both;}. Header{height:100px;background-color: #0080FF;} . main{overflow:hidden;_zoom:1; Left,.right,.cont{min-height: 300px;padding-bottom:9999px;margin-bottom: -9999px;_height:300px;} /* Three columns, etc. high/left{width:150px;background-color: #f00; Right{width:150px;background-color: #008080;} . Cont{overflow:hidden;background-color: #900; _zoom:1; Footer{height: 100px;background-color: #0080FF;} </style> <div class= "Header" > This is the head. </div> <div class= "Main" > <div class= "left FL" > Left </div> <div class= "Right fr" > Right </div> <div class= "cont" > Cont <br/> Trigger the BFC of modern browsers and trigger the Haslayout properties of the old version of IE browser to achieve all browser-compatible column width Adaptive layout: Do not consider the three-column loading sequence, the middle bar without extra layer <br/> Prevent. Cont from being hidden: body{min-width:2x.left+.right} </div> </div> <div class= "Footer" > Footer Content </div> </body> |
|
Hint: You can modify some of the code before running.
Method 3: (legendary Grail/double wing layout, intermediate Adaptive column can be first loaded)
The main use is floating float and the combination of margin, the source code is as follows:
| The code is as follows | Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <body> <style type= "Text/css" > *{margin:0;padding:0;} body{min-width:450px}. Fl{float:left; Fr{float: Right;} . clear{clear:both; clearfix{overflow:hidden;_zoom:1; Clearfix:after{display:block;content: ""; width:0;height:0;overflow:hidden;clear:both;}. Header{height:100px;background-color: #0080FF;} . main{overflow:hidden;_zoom:1; Left,.right,.cont_inner{min-height: 300px;padding-bottom:9999px;margin-bottom: -9999px;_height:300px;} /* Three columns, etc. high/cont{width:100%; Cont_inner{margin-left:150px;margin-right: 150px;background-color: #900;} . Left{width:150px;background-color: #f00; Margin-left: -100%;} . Right{width:150px;background-color: #008080; Margin-left: -150px;} . Footer{height:100px;background-color: #0080FF;} </style> <div class= "Header" > This is the head. </div> <div class= "Main" > <div class= "cont fl" > <div class= "Cont_inner" > Cont </div> </div> <div class= "left FL" > Left </div> <div class= "Right fr" > Right </div> </div> <div class= "Footer" > Footer Content </div> </body> |
|
Hint: You can modify some of the code before you run it.
from the source code, do not pay attention to column loading sequence, Method 1 is relatively concise, but the requirements of adaptive column priority loading, the Grail layout is undoubtedly the preferred solution!
In addition, the Grail layout is a more flexible way of laying out the HTML structure, adjusting the CSS style only, and implementing a variety of layouts, such as replacing the corresponding portion of Method 2 with any of the following code to achieve a different layout:
. Cont_ Inner{margin-right:300px;background-color: #900;}
left{width:150px;background-color: #f00; Margin-left: -300px;}
right{width:150px;float:left;background-color: #008080; margin-left:-150px;}
or
. Cont_inner{margin-left:300px;background-color: #900;}
left{width:150px;background-color: #f00; margin-left:-100%;}
right{width:150px;float:left;background-color: #008080; margin-left:-100%;p osition: relative;left:150px;}
Other layouts, toss the combination ^_^
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
