[] Classes against the war
1.flex layout
Flexible Box model of flexbox commonly referred to, is a one-dimensional layout model. It gives the child elements between flexbox provides a powerful spatial distribution and alignment capabilities. We say flexbox is a one-dimensional arrangement, because a flexbox can only handle elements on a dimension layout, or a row. Here we use flex layout to achieve two fixed an adaptive
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #main{ display: flex;/*设为伸缩容器*/ } #left{ width:200px;/*左侧固定宽度*/ height:400px; background:aqua; } #center{ flex-grow:1; /*填满剩余空间*/ height:400px; background:green;} #right{ width:200px;/*固定右侧宽度*/ height:400px; background:blue; } </style> </head> <body> <div id="main"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html>
2. The method of using the floating
Two right and left portions are used float: left and float: right, float left and right two elements from the document flow, a normal intermediate element in the normal flow of the document. Intermediate document flow margin specified using the left and right margins for positioning.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} #main{ width: 100%; Height : 400px ; } #left { width : 200px ; / * left fixed width * / height : 400px ; a float : left ; / * set the floating vessel left * / background : Aqua ; } #center { width : 100% ; height : 400px ; margin : 0 200px ; / * set the left and right margins of the container * / background : Green ; } #right { width : 200px ; / * Fixed Right Width * / height : 400px ; a float : right ; / * Set the right float container * / background : Blue ; } </ style > </ head > < body > < div ID = "main" > < div ID = "left" > </ div> <div id="right"></div> <div id="center"></div> </div> </body> </html>
3. Floating plus function calc
Use of three-part float: left, and the left and right sides of fixed width, the width of the intermediate calculation using the function calc.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} #main{ width: 100%;height: 400px; } #left{ width:200px;400px: height* /Left fixed width/ * ; A float : left ; / * set the floating vessel left * / background : Aqua ; } #center { width : Calc (100% - 400px) ; / * set the intermediate container width minus the width of the parent 400px * / height : 400px ; a float : left ; / * set the floating vessel left * / background : Green ;} #right { width : 200px ; / * fixed right width*/ height:400px; float:left;/*设置容器左浮动*/ background:blue; } </style> </head> <body> <div id="main"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html>
4. Use absolute positioning
Absolute positioning portion is fixed to the left and right ends, the intermediate stream using specified margin around the document positioning margins.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} #main{ width: 100%; height: 400px; position: relative;: width{ #left }* /Parent container using relative positioning/ * 200px ; / * left fixed width * / height : 400px ; position : Absolute ; / * left fixed positioning * / left : 0 ; / * is positioned at the left-most container * / Top : 0 ; background : Aqua ; } # Center { width : 100% ; height : 400px ; margin : 0 200px ; / *Left and right margins intermediate container * / background : Green ;} #right { width : 200px ; / * Fixed Right Width * / height : 400px ; position : Absolute ; / * right fixed positioning * / right : 0 ; / * positioned on the rightmost container * / Top : 0 ; background : Blue ; } </ style> </ head> <body> <div id="main"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html>
The effect is as follows:
