Home > Developer > Web Develop
The general meaning of the two-wing layout is that the contents of the left and right sides are fixed, the size is fixed,
The middle layout changes automatically as the size of the page changes.
To parse by code:
1. Four Div, you can also use section, where Main,left.right is the same level of elements, inner is the child element of Main.
2.main,left,right are left floating.
The width of the 3.main is 100%, which fills the page.
4. Set the left margin-left:-100%, and leave it on the same level as the main, on the leftmost side.
5. Set the margin-left:-200px of right, where 200px is the width of the right, and leave the starboard at the rightmost.
6. Set the child element of main inner,width like Main, the margin order is top, right, bottom, left, so margin:0px 200px 0px 200px,
200px from the left, 200px from the right, where the former is the width of leave, and the latter is the width of the.
<!DOCTYPE HTML><HTMLLang= "en"xmlns= "http://www.w3.org/1999/xhtml"><Head> <MetaCharSet= "Utf-8" /> <title>Dual Wing layout</title> <style>Body{margin:0px;padding:0px;Min-width:500px; }#main{width:100%;Height:200px;Background-color:Red;float: Left; }#left{width:200px;Height:200px;Background-color:Blue;float: Left;Margin-left:-100%; }#right{width:200px;Height:200px;Background-color:Green;float: Left;Margin-left:-200px; }#inner{margin:0px 200px 0px 200px;Background-color:Pink;Height:200px;Word-break:Break-all; } </style></Head><Body> <DivID= "Main"> <DivID= "inner">
Fdsfsdfsdfsdf
Fdsfsdfsdfsdf
Fdsfsdfsdfsdf
Fdsfsdfsdfsdf
FDSFSDFSDFSDF</Div> </Div> <DivID= "Left"></Div> <DivID= "Right"></Div></Body></HTML>
CSS's dual wing 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
