With a floating positioning method, the fixed width and adaptation from one column to multiple columns can be basically done simply, including a fixed width of three columns. And here's a new request for us, want to have a three-column layout, the base in the left column required fixed width, and the left display, the right column required fixed width and the right display, and the middle bar needs in the left column and the middle of the right column, according to the spacing changes automatically adapt to the left column. This gives the layout a new requirement, and simply use float property and percent attribute is not able to implement, CSS currently does not support the calculation of the percentage of precision to consider the left and right column placeholder, if the middle bar using 100% width, it will use the width of the browser window, Instead of the middle 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 way of positioning-absolute positioning. The previous floating positioning mode mainly by the browser based on the content of the object automatically adjust the direction of the float, but this way can not meet the positioning requirements, it needs a new method to achieve, the CSS provided to remove the floating positioning of the other way is absolute positioning, absolute positioning using the Position property to achieve.
Position used to set the value of the object's positioning: static/absolute/relative
For each object in the page, the default Position property is static.
If you set the object to Position:absolute, the object will reposition according to the location of the entire page, and when you use this property, you can use the distance value of the top,right,bottom,left in the left and right four directions to determine the exact location of the object, looking at the following CSS:
#layout {
Position:absolute;
top:20px;
left:0px;
}
If #layout uses Position:absolute, it will become an absolute positioning mode, and at the same time it will always be 20px from the top of the browser window, while setting top:20px, and will ensure that it is 0px from the left margin of the browser.
Note: If an object is set to Position:absolute, it will essentially detach itself from other objects, and its positioning mode will not affect other objects or be affected by the floating positioning of other objects, in a sense, after using absolute positioning, objects float on top of a page like a layer.
After absolutely positioned object, will not consider it and the floating relationship in the page, only need to set the object's Top,right,bottom,left four direction of value.
In this case, using absolute positioning is a good way to solve the problem we are proposing. Also, use 3 div to form our three-column structure:
Copy Code code 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 to the left, and the right column will be displayed with the left-hand edge, and the right-hand bar would be right:0px, making the right column to the right, while the middle #center will use the normal CSS style:
Copy Code code 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 want it to have the left margin always keep #lef and #right width, then realize the two sides to give up the 202px of the adaptive width, and the left and right sides to let the distance, just let #left and #right displayed in this space, Thus fulfilling the requirement.
<! 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> <div id= "left" > Left-Hand </div> <div id= "center" > Column--aa25. Cn</div> <diV id= "Right" > right-hand column </div> <!--This article comes from www.aa25.cn--> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The production process is as follows:
Create div tags, css borders, background color, width, height no longer detailed, you can refer to the previous tutorial, specifically the new contact in this example of the properties in the CSS dialog box how to set the:
