CSS web page layout introductory tutorial 8: Three columns of floating middle column width adaptive_Basic tutorial

Using the floating positioning method, fixed width and adaptation from one column to multiple columns can basically be completed easily, including fixed width of three columns. Here we are given a new requirement. We hope to have a three-column layout. The left column in the base requires a fixed width and is displayed on the left. The right column requires a fixed width and is displayed on the right. The middle column needs to be between the left column and the right column. The middle of the right column automatically adapts according to the change in spacing between the left and right columns. This puts forward a new requirement for layout, and it cannot be achieved simply by using float attributes and percentage attributes. CSS currently does not support percentage calculations that are accurate enough to take into account the space occupied by the left and right columns. If you use 100% for the middle column For width, it will use the width of the browser window instead of the middle spacing between the left column and the right column, so we need to rethink this issue.

Absolute positioning
Before starting such a three-column layout, it is necessary to understand a new positioning method - absolute positioning. The previous floating positioning method mainly allows the browser to automatically adjust the floating direction according to the content of the object. However, when this method cannot meet the positioning requirements, a new method is needed to achieve it. CSS provides another method besides floating positioning. The positioning method is absolute positioning, which is achieved using the position attribute.

position Used to set the positioning method of objects. Available values: static/absolute/relative

For every object in the page, the default position attribute is static.
If the object is set to position:absolute, the object will be repositioned according to the position of the entire page. When using this attribute, you can use top, right, bottom, left, that is, the distance values ​​​​in the four directions of top, right, bottom, and left. To determine the specific position of the object, see the following CSS:

#layout {
position:absolute;
top:20px;
left:0px;
}
If# When the layout uses position:absolute;, it will become an absolute positioning mode. At the same time, when setting top:20px;, it will always be 20px away from the top of the browser window, and left:0px; will ensure that it is away from the left margin of the browser. is 0px.

Note: If an object is set with position:absolute; it will be essentially separated from other objects. Its positioning mode will not affect other objects, nor will it be affected by the floating positioning of other objects. In a sense, after using absolute positioning, the object floats on the web page like a layer.

After the object is absolutely positioned, its floating relationship with the page will no longer be considered. You only need to set the values ​​​​of the object's top, right, bottom, and left directions.

In this case, using absolute positioning can solve the problem we raised well. Similarly, use 3 divs to form our three column structure:

Copy code The 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 displayed close to the left edge by left: 0px;, while the right column will be displayed by right: 0px; so that the right column will be displayed from the right, and the #center in the middle will use ordinary CSS Style:

Copy code The code is as follows:

#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 202px;
margin-left: 202px;
}

For #center, we don’t need to set its floating method. We only need to let it have a left margin and always maintain the width of #lef and #right, thus achieving an adaptive width of 202px on both sides. , and the distance between the left and right sides is just enough for #left and #right to be displayed in this space, thus achieving the requirements.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Three columns with fixed width on the left and right, adaptive in the middle - 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> <div id="left">Left column</div> <div id="center">Center column</div>