HTML code (12th method):
<Divclass= "Left">Left fixed area</Div><Divclass= "Right">Right fixed area</Div><Divclass= "Mid">Intermediate Adaptive Zone</Div>
CSS code:
First method (positioning):
. Left{position:Absolute;Top:0; Left:0;width:100px;Height:200px;Background-color:Red; }. Mid{Margin-left:100px;Margin-right:200px;Height:200px;Background-color:Blue; }. Right{position:Absolute;Top:0; Right:0;width:200px;Height:200px;Background-color:Yellow; }
The second method (floating):
. Left{float: Left;width:100px;Height:200px;Background-color:Red;}. Mid{Height:200px;Background-color:Blue;}. Right{float: Right;width:200px;Height:200px;Background-color:Yellow;}
The third method (negative margin):
HTML code:
<Divclass= "center FL"> <Divclass= "Mid"> Middle Adaptive Region Adaptive Zone Intermediate Adaptive Zone Intermediate Adaptive Region Middle Adaptive Zone Intermediate Adaptive Zone Intermediate Adaptive Zone Mid Adaptive Zone Center self-adaptive area in intermediate self-adaptive region</Div></Div><Divclass= "Left fl">Left fixed area</Div><Divclass= "Right fl">Right fixed area</Div>
CSS code:
. FL{float: Left; }. Center{width:100%;Height:200px;background:Yellow;}. Center. Mid{Margin-right:100px;padding:0 110px; }. Left{Margin-left:-100%;width:100px;Height:200px;background:Green;}. Right{Margin-left:-200px;width:200px;Height:200px;background:Blue;}
Implement a three-column layout (left-right fixed, middle-adaptive width)