Using the floating positioning method, from one column to the multi-column fixed width and the adaptive, basically can complete simply, including three columns of fixed width. And here to give us a new request, want to have a three-column layout, the base of the left column requires a fixed width, and left to display, the right column requires a fixed width and the right to display, while the middle column needs to be in the left column and the right column in the middle, according to the spacing between the column changes automatically adapt. This presents a new requirement for layout, and simply using the float attribute and percent attribute is not achievable, CSS currently does not support the calculation of percentages to consider the left column and the right column of the placeholder, if the middle column using 100% width, it will use the width of the browser window, Instead of the center spacing between the left and right columns, we need to think again about the problem.
Absolute positioning
Before starting such a three-column layout, it is necessary to understand a new positioning method-absolute positioning. The front of the floating positioning method mainly by the browser based on the content of the object automatically adjust the floating direction, but this method can not meet the positioning requirements, it is necessary to implement a new method, the CSS provided by the removal of floating positioning is an absolute positioning, absolute positioning using the Position property to achieve.
Position used to set the positioning of an object available values: static/absolute/relative
The default Position property is static for each object in the page.
If you set the object to Position:absolute, the object will be repositioned based on the position of the entire page, and when you use this property, you can use the distance value of Top,right,bottom,left, which is the four-to-right left-hand direction to determine the exact location of the object, as shown in the following CSS:
#layout {
Position:absolute;
top:20px;
left:0px;
}
If #layout uses Position:absolute, it will become absolute positioning mode, while setting top:20px, it will always be 20px from the top of the browser window, and left:0px will be guaranteed to be 0px from the left margin of the browser.
Note: If an object is set to Position:absolute, it will be separated from other objects in nature, its positioning mode will not affect other objects, and will not be affected by the floating positioning of other objects, in a sense, after using absolute positioning, objects float on top of a Web page just like a layer.
After an absolutely positioned object, no longer considers its floating relationship with the page, it only needs to set the value of the object's top,right,bottom,left in four directions.
In this case, the use of absolute positioning can be a good solution to the problem we have raised. Similarly, use 3 div to form our three columns structure:
Copy CodeThe code is as follows:
#left {
Background-color: #E8F5FE;
border:1px solid #A9C9E2;
height:400px;
width:200px;
Position:absolute;
top:0px;
left:0px;
}
#right {
Background-color: #FFE7F4;
border:1px solid #F9B3D5;
height:400px;
width:200px;
Position:absolute;
top:0px;
right:0px;
}
In this way, the left column will be left:0px from the left side, the left edge will be displayed, and the right column would be right:0px, so the right column is displayed right, and the middle #center will use the normal CSS style:
Copy CodeThe code is as follows:
#center {
Background-color: #F2FDDB;
border:1px solid #A5CF3D;
height:400px;
margin-right:202px;
margin-left:202px;
}
For #center, we do not need to set its floating mode, just let it have left margin forever to maintain the width of #lef and #right, then realize the two sides to make 202px adaptive width, and left and right sides let the distance, just let #left and #right show in this space, So as to achieve the requirements.
<textarea id= "runcode93696" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> three-column fixed-width intermediate adaptive--aa25. cn</title> <style> body{margin:0px; } #left {background-color: #E8F5FE; border:1px solid #A9C9E2; height:400px; width:200px; Position:absolute; top:0px; left:0px; } #center {background-color: #F2FDDB; border:1px solid #A5CF3D; height:400px; margin-right:202px; margin-left:202px; } #right {background-color: #FFE7F4; border:1px solid #F9B3D5; height:400px; width:200px; Position:absolute; top:0px; right:0px; } </style> </pead> <body> column--aa25 in the left column. CN right Column <!--This article from www.aa25.cn--> </body> </ptml> </textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
The production process is as follows:
Create div tags, css borders, background color, width, height is no longer detailed, you can refer to the previous tutorial, specifically, in this example, the new contact properties in the CSS dialog box is how to set:
