CSS layout: three-column layout with intermediate content loading priority

During the front-end development interview last week, we encountered such a written test question, with three columns of layout. The middle content is preferentially loaded, and the DIV width on both sides is PX.

First, I thought of the method: parent Div relative positioning, the left and right margins of the middle Div are all 210px; the left and right sides of the DIV are absolutely positioned, respectively, on the left and right sides.

After I wrote it on paper, I felt that there was no problem at the time, but the examiner interviewed me expressed doubts about the effectiveness of the layout. Of course, he was not sure. Maybe he used other methods. After I went home, I tried it. It's OK .. There is not only one solution to the problem ..

<! Doctype HTML> 
 
 
Ii. Floating Method
<! Doctype HTML> 
 
 
 
 
The following is an online search.
 
HTML code:
<Div id = "Left"> left sidebar </div>
<Div id = "right"> right sidebar </div>
<Div id = "Main"> main content </div>
Method 1: absolute positioning (not recommended)
CSS section:
Body {margin: 0; padding: 0; Height: 100% ;}
# Left, # right {position: absolute; top: 0; width: 220px; Height: 100%; Background: pink ;}
# Left {left: 0 ;}
# Right {right: 0 ;}
# Main {margin: 0 230px; Height: 100% ;}
This method is the simplest and most troublesome. If the middle column contains the minimum width limit or an internal element containing the width, when the browser width is small to a certain extent, the layers overlap.
 
Method 2: Floating Layout
CSS section:
# Left, # right {float: Left; width: 220px; Height: 200px; Background: Blue ;}
# Right {float: Right ;}
# Main {margin: 0 230px; Background: red; Height: 200px ;}
In this method, I use the floating principle. The left and right sides of the fixed width are respectively floating on the left and right. At this time, the main content column (the middle column is not fixed) the master automatically inserts data into the middle of the left and right columns. Note that the middle column must be placed behind the left and right columns.
 
Method 3: Margin Method
CSS section:
# Left {width: 200px; float: Left; margin-Right:-200px; Background-color: # ff9900}
# Main {width: auto; Background: #00ff00; margin: 0 220px ;}
# Right {width: 200px; margin-left:-200px; float: Right; Background-color: # cccc00}
After the left and right settings, use margin
 
Method 4: the simplest method for personal feeling:
CSS section:
# Left {width: 200px; float: Left ;}
# Mid {width: auto ;}
# Right {width: 200px; float: Right ;}
The width: Auto is used in the middle, and the left and right sides are respectively floating
 
Method 5: Implement middle column priority loading (important part is priority loading)
HTML section:
<Div class = "Main-2">
<Div class = "Main-wrap-2"> main-wrap </div>
</Div>
<Div class = "sub-2"> sub </div>
<Div class = "Extra-2"> extra </div>
CSS section:
. Main-2 {float: Left; width: 100%; margin-bottom:-3000px; padding-bottom: 3000px; Background: # f90 ;}
. Main-wrap-2 {margin: 0 200px 0 150px ;}
. Sub-2 {float: Left; margin-left:-100%; width: 150px; Background: #6c0; margin-bottom:-3000px; padding-bottom: 3000px ;}
. Extra-2 {float: Left; margin-left:-200px; width: 200px; Background: # f9f; margin-bottom:-3000px; padding-bottom: 3000px ;}
The key to priority loading is that the important content must be in front of HTML, and all the main parts are moved to the top.
 
For more information, see -- Dual-flying wing layout:
<Style type = "text/CSS">
* {Margin: 0; padding: 0px ;}
. Header {Background: #666; text-align: center ;}
. Body {overflow: hidden; * ZOOM: 1 ;}
. Wrap-2 {margin-top: 30px ;}
. Wrap-2. Main-2 {float: Left; width: 100%; margin-bottom:-3000px; padding-bottom: 3000px; Background: # f90 ;}
. Wrap-2. Main-wrap-2 {margin: 0 200px 0 150px ;}
. Wrap-2. sub-2 {float: Left; margin-left:-100%; width: 150px; Background: #6c0; margin-bottom:-3000px; padding-bottom: 3000px ;}
. Wrap-2. extra-2 {float: Left; margin-left:-200px; width: 200px; Background: # f9f; margin-bottom:-3000px; padding-bottom: 3000px ;}
. Footer {Background: #666; text-align: center ;}
</Style>
<Div class = "Wrap-2">
<Div class = "Header"> header </div>
<Div class = "body">
<Div class = "Main-2"> <Div class = "Main-wrap-2"> <p> main-wrap </P> <p> main-wrap </ p> </div>
<Div class = "sub-2"> <p> sub </P> </div>
<Div class = "Extra-2"> <p> extra </P> <p> margin-left: 350px; Background: # cc0; margin-left: 350px; Background: # cc0; </P> </div>
</Div>
<Div class = "footer"> footer </div>
</Div>
 
Method 6: The middle column is preferentially loaded. The css3 method is used:
[HTML] <! Doctype HTML>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> adaptive width. The left and right columns have fixed width, and the middle columns are preferentially loaded. </title>
<Style>
. Container {
Display:-moz-box;
Display:-WebKit-box;
}
Div {
Padding: 10px;
-Moz-box-sizing: border-box;
-WebKit-box-sizing: border-box;
}
. Sider_l {
Width: 250px;
-Moz-box-ordinal-group: 1;
-WebKit-box-ordinal-group: 1;
Background: limegreen;
}
. Middle_content {
-Moz-box-Flex: 1;
-WebKit-box-Flex: 1;
-Moz-box-ordinal-group: 2;
-WebKit-box-ordinal-group: 2;
Background: lightpink;
}
. Sider_r {
Width: 250px;
-Moz-box-ordinal-group: 3;
-WebKit-box-ordinal-group: 3;
Background: green;
}
</Style>
</Head>
<Body>
<Div class = "Container">
<Div class = "middle_content"> preferentially loads the primary content area </div>
<Div class = "sider_l"> left sidebar </div>
<Div class = "sider_r"> right sidebar </div>
</Div>
</Body>
</Html>
[/Html]
 
Method 7: The position: absolute method is preferentially loaded in the middle column.
<Style type = "text/CSS">
HTML, body {width: 100%; Height: 100%; margin: 0; padding: 0 ;}
. Content {width: 100%; Height: 100%; position: relative; Background: # CFF; overflow: hidden ;}
. Left {width: 200px; Height: 100%; Background: #0f0; position: absolute; Z-index: 1001; top: 0; left: 0 ;}
. Center-CT {Height: 100%; Background: # 60f; position: absolute; Z-index: 900; top: 0; left: 0; margin: 0; width: 100% ;}
. Center {margin: 0 200px ;}
. Right {width: 200px; Height: 100%; Background: # ff0; position: absolute; Z-index: 1000; Right: 0; top: 0 ;}
</Style>
</Head>
<Body>
<Div class = "content">
<Div class = "center-CT">
<Div class = "center">
Center center Center center center Center
</Div>
</Div>
<Div class = "Left"> left </div>
<Div class = "right"> right </div>
</Div>
</Body>
</Html>