Two approaches.
Procedure one:
<! DOCTYPE html>"UTF-8"> <style> *{margin:0; padding:0; } #left {width:100px; float: Left; Background:green; height:300px; } #right {width:100px; float: Right; background:red; height:300px; } #middle {margin-right:110px; Margin-left:110px; height:300px; Background: #ccc; }</style>" Left"> </div> <div id=" Right"> </div> <div id="Middle"> </div></body>The idea is: 1, the use of left/right two elements to achieve left and right floating, floating flow will not affect the position of the middle element, but will obscure the flow of the document.
2, then add the margin-right and Margin-left attributes in the middle element, so that the middle elements open up occupy space, if only set the Margin-right or margin-left, the middle element will not fill the middle space.
Procedure two:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <style> *{margin:0;padding:0; }#bd{padding:0 230px 0 190px;/*increases the padding for the main element of 100% width and then moves the sub and extra elements with relative positioning to make the contents of the main element appear normally*/ }. Sub{ /*you need to make sure the sub is on the left*/float: Left;width:190px;Height:30px;Background-color:Red;Margin-left:-100%;position:relative; Left:-190px; }. Main{float: Left;width:100%;Height:30px;Background-color:Blue; }. Extra{float: Left;width:230px;Height:30px;Background-color:Green;Margin-left:-230px;position:relative; Right:-230px; } </style></Head><Body> <DivID= "page"> <DivID= "BD"> <Divclass= "Main">Main this is the subject</Div> <Divclass= "Sub">Sub, this is the left.</Div> <Divclass= "Extra">Extra, this is the right.</Div> </Div> </Div--> </Body></HTML>Classic double-wing layout. Consists of main, sub, extra, main is located in the middle, sub, extra located around.
Here the main element is placed before the sub, because the contents of the main element can be parsed first, so that the person reading the page can see the main content of the page more quickly.
Ideas: 1, three elements are left floating, and sub and extra have a fixed width, main is 100% width. At this point, main and the other two elements are divided into two layers.
2. Use negative margins, such as the margin-left:-100% of a sub; You can make it float to the far left of the first line, which is the left side of the row where main is. Extra margin-left:230px (greater than or equal to the width of the extra element), the element floats to the far right of the line.
3. After two steps above, sub and extra floating elements float to the left and right of the main element, then cover the contents of the main element, for example, the text in the main element is now from the leftmost, but is obscured by the sub element. Using the parent element BD of three elements, set the padding, increase the padding, and the left and right padding are exactly equal to the width of sub and extra. At this point, the overall element width becomes shorter, left and right appear blank. And the left and right side of main is covered.
4, the last step, and then the sub and extra relative positioning, so that two elements relative to the original position offset to the left and right space. The text in main will not be covered!
Three-column layout, fixed left and right widths, mid-width adaptive variation---normal format and double-fly-wing format
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
