The first method: absolute positioning
<!DOCTYPE HTML><HTML> <Head> <title>Three-column layout</title> <Linkrel= "stylesheet"type= "Text/css"href= "Task0001.css"> </Head> <Body> <Divclass= "Wrap"> <Div>Three-column Layout 1</Div> <Divclass= "one Col-3-one">One</Div> <Divclass= "Three Col-3-three">Three</Div> <Divclass= "Col-3-two">Both</Div> </Div> </Body></HTML>
. Wrap{position:relative;}. One{width:40px;background:Blue;}. the{background:Yellow;}. Three{width:40px;background:Red;}. Col-3-one{position:Absolute; Left:0px;}. Col-3-three{position:Absolute; Right:0px;}. Col-3-two{position:Static;Margin-left:40px;Margin-right:40px;}
The second method: floating positioning
<!DOCTYPE HTML><HTML> <Head> <title>Three-column layout</title> <Linkrel= "stylesheet"type= "Text/css"href= "Task0001.css"> </Head> <Body> <Div> <Div>Three-column Layout 2</Div> <Divclass= "one col-3-one-float">One</Div> <Divclass= "Three Col-3-three-float">Three</Div> <Divclass= "Col-3-two">Both</Div> </Div> </Body></HTML>
. Wrap{position:relative;}. One{width:40px;background:Blue;}. the{background:Yellow;}. Three{width:40px;background:Red;}. Col-3-two{position:Static;Margin-left:40px;Margin-right:40px;}. Col-3-one-float{float: Left;}. Col-3-three-float{float: Right;}
The two approaches are inherently different, with the structure being the two div that is out of the document Stream and a div that is positioned directly in the document flow.
The document flow is the position in the document where the objects in the display are in the arrangement. Both floating and absolute positioning are not space-occupying.
Attention:
1. When absolute timing is used, the parent element is positioned (that is, the position is not static), and if no parent element is positioned, it is positioned relative to the body
2. The two div that is out of the document stream needs to be above the normal Div, or the second Div will fill the screen, and the third div that is out of the document stream is pushed directly below.
Three-column layout, where the left and right parts of the width are fixed, the middle part width varies with the width of the browser and adapts itself
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
