Home > Developer > Web Develop
The main use here is position:absolute; and the margin property; The code is simple, and you can see it at a glance.
<!DOCTYPE HTML><HTMLLang= "ZH_CN"><Head> <MetaCharSet= "UTF-8"> <title>Three-column layout, left and right fixed values, intermediate adaptive</title> <styletype= "Text/css">. Container{position:relative;}. Left{position:Absolute; Left:0;Top:0;width:200px;Height:500px;Background-color:#f34;}. Right{position:Absolute; Right:0;Top:0;width:300px;Height:500px;Background-color:#fcc;}. Middle{margin:0 300px 0 200px;Height:500px;Background-color:#ccc;} </style></Head><Body> <Divclass= "Container"> <Divclass= "Left"></Div> <Divclass= "Middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut l Abore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo con Sequat. Duis aute irure dolor in Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur Sint Occaecat Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim ID est laborum. </Div> <Divclass= "Right"></Div> </Div></Body></HTML>
So that's what it looks like on the page.
CSS implementation of the three-column layout, left and right fixed value, intermediate adaptive.
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
