Home > Developer > Web Develop
I. Three column layout
1. Classic Grail layout (double wing layout)
<style type= "Text/css" > *{margin:0;padding:0;} body{min-width:700px;} . Header, . footer{ border:1px solid #333; Background: #aaa; Text-align:center; } . Sub, . Main, . extra{ float:left; min-height:130px; } . sub{ margin-left: -100%; width:200px; background:red; } . extra{ margin-left: -220px; width:220px; Background:blue; } . main{ width:100%; } . main-inner{ margin-left:200px; margin-right:220px; min-height:130px; Background:green; Word-break:break-all; } . footer{ clear:both; } </style>
<div class= "header" >2. Absolute Positioning method
<style type= "Text/css" >*{margin:0px;padding:0px;}. left{position:absolute;background-color:orange;width:100px;height:300px;}. Center{height:300px;background-color:blue;text-align:center;}. right{position:absolute;background-color:green;top:0px;right:0px;width:100px;height:300px;} </style><body><div class= "left" >left</div><div class= "center" >center</div> <div class= "right" >right</div></body>Pros: Three div order can be changed arbitrarily
Cons: Top Values to note
3. Self-floating
<style type= "Text/css" >.left{float:left;background-color:orange;width:100px;height:300px;}. Center{height:300px;background-color:blue;text-align:left;}. right{float:right;background-color:green;width:100px;height:300px;} </style><body><div class= "left" >left</div><div class= "right" >right</div>< Div class= "center" >center</div></body>Advantage page affects small
Cons: Center must be at the bottom
4.CSS3 new Features
#box {display:flex;width:100%;}. left{background-color:orange;width:100px;height:300px;}. Center{height:300px;background-color:blue;text-align:left;flex:1;}. right{background-color:green;width:100px;height:300px;} </style><body><div id= "box" ><div class= "left" >left</div><div class= "center" > Center</div><div class= "right" >right</div></div>Flex properties are used to set or retrieve how the child elements of a flexible box model object allocate space.
Flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Flex Calculation rule: Calculates the total datum of all child elements first and calculates the remaining space according to the remaining space and the coefficient of allocation than the calculation of the remaining space to obtain the final width
Two. Two Column layout
1.position:absolute;
2.float and margin
Extended
The Calc () function is used to dynamically calculate length values.
CSS Two column three-column layout
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
