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, hoping to have a three-column layout, in which the left column requires a fixed width and is displayed on the left, the right column requires a fixed width and is displayed on the right, and the middle column needs to be between the left and right columns. The middle of the column automatically adapts 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 is used to set the positioning method of the object. Available values: static/absolute/relative
For every object on the page, the default position property is static. If you set an object to position:absolute, the object will break out of the document flow and be repositioned according to its position throughout the 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 #layout uses position:absolute;, it will become absolute positioning mode. At the same time, when setting top:20px;, it will always be 20px away from the top of the browser window, while left:0px; will ensure that it is away from the top of the browser window. The left margin of the browser is 0px. .
Note: If an object is set to 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:
#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 styles:
#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. This achieves an adaptive width of 202px on both sides, and the left and right sides have an adaptive width of 202px. The distance just allows #left and #right to be displayed in this space, thus achieving the requirements.