The so-called three-column adaptive layout refers to both sides of the fixed width, the middle block width adaptive. This question in NetEase in this year to push front-end engineers interview when also asked. I am mainly divided into two categories, one is based on the implementation of the position tradition, a class is based on the CSS3 new feature elastic box model layout implementation.
1. Layout based on traditional attributes such as position and marginHere are also divided into three methods, respectively, the absolute positioning method, the Grail layout, self-floating method. 1). Absolute Positioning MethodThe principle of absolute positioning is to use the left and right sides of the absolute positioning, because the absolute positioning to make it out of the document flow, the back of the center will flow naturally to them, and then use the margin property, leaving the width of the left and right elements, so that the middle element can adapt to the screen width. The code is as follows: Document code:
[HTML]View Plain copy
- <! DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>layout_box</title>
- <link rel="stylesheet" type= "text/css" href=". /css/layout_box.css ">
- </head>
- <body>
- <h3> Implement three-column-width adaptive layouts </h3>
- <div id = "left"> I am </div>
- <div id = "right"> I'm on </div>
- <div id = "center"> I am the middle </div>
- </Body>
- </html>
CSS Code:
[CSS]View Plain copy
- html,body{ margin: 0px; Width: 100%;}
- H3{height: 100px; Margin:20px 0 0;}
- #left,#right {width: 200px; Height: 200px; Background-color: #ffe6b8; Position: absolute;top:120px;}
- #left {left:0px;}
- #right {right: 0px;}
- #center {margin:2px 210px; Background-color: #eee; Height: 200px;}
The advantages of the method layout, three div order can be arbitrarily changed. Not enough because of absolute positioning, so if there is something else on the page, the top value needs to be handled with care, preferably a CSS style can be initialized, as in the above example added a title, if the style is not initialized, the values on both sides and the middle will be misaligned. In addition, compression occurs when the browser window is smaller than 200px.as a result, you can see that the middle column width scales with the screen size. 2). Use self-floating methodthe principle of self-floating method is to use Float:left and float:right,float respectively to leave the left and right two elements out of the document flow, the intermediate elements are normal in the normal document flow, using margin to specify the left and right margin to a positioning. HTML code:
[HTML]View Plain copy
- <h3> Positioning >
- <div id = "left_self"> I'm left </div>
- <div id = "right_self"> I'm right </div>
- <div id = "center_self"> I am the middle </div>
CSS Code:
[CSS]View Plain copy
- #left_self,#right_self { width: 200px; Height: 200px; background-color: #ffe6b8}
- #left_self {float: left ;}
- #right_self {float: right ;}
- #center_self {margin: 0 210px; Height: 200px; background-color: #a0b3d6}
the advantage of the layout method is affected by the outside, but the shortage is the order of three elements, the center must be placed at the end, which is not the same as the absolute location, center occupies the position of the document flow, so be sure to put in the last, left and right two element position is not related. When the browser window is small, the element on the right will be hit down one line. 3). Holy Grail layout the principle of the Grail layout is the margin negative method. With the Grail layout, you first need to include a div outside the center element, including a div that needs to set the Float property to form a BFC, and set the width to match the margin value of the left block, which is referenced here. This explains the Holy Grail layout in particular detail. implementation code: HTML Document:
[HTML]View Plain copy
- <h3> Using margin negative method for layout </h3>
- <div id = "wrap">
- <div id = "center"></div>
- </div>
- <div id = "left_margin"></div>
- <div id = "right_margin"></div>
CSS Code:
[CSS]View Plain copy
- #wrap { width: 100%; Height: 100px; Background-color: #fff; float: Left ;}
- #wrap #center { margin:0 210px; height: 100px; Background-color: #ffe6b8;}
- #left_margin,#right_margin { float: left ; Width: 200px; Height: 100px; Background-color:darkorange}
- #left_margin {margin-left: -100%; Background-color:lightpink}
- #right_margin {margin-left: -200px;}
This method is very common in the website layout, also is the interview frequently test center, the advantage is three columns interrelated, has certain resistance. It is important to note that the middle part of the layout must be placed in front, the left and right order is not limited. For left fast margin negative value must be equal to the width of wrap. three ways to achieve three columns of Web page width adaptive layout method see.
2, CSS3 new features
Wrap a div around the perimeter, set to Display:flex, flex:1 in the middle, but the box model is next to each other, you can use margin to control the margin.
Code:
[HTML]View Plain copy
- <div id = "box">
- <div id = "left_box"></div>
- <div id = "center_box"></div>
- <div id = "right_box"></div>
- </div>
CSS style:
[CSS]View Plain copy
- #box {width:100%; Display:flex; height: 100px; margin: 10px;}
- #left_box,#right_box {width: 200px; Height: 100px; margin: 10px; Background-color:lightpink}
- #center_box {flex:1; height: 100px; margin: 10px; Background-color:lightgreen}
Note: Center must be placed in the middle.
As follows:
There are many other features of the CSS layout, and the next step is to study the position, and the display properties.
(Turn around) use CSS to implement a three-column adaptive layout (fixed width on both sides, middle adaptive)
