Using floating positioning, the fixed width and adaptability from one column to multiple columns can be basically completed simply, including the fixed width of three columns. Here we have put forward a new requirement, hoping to have a three-column layout, where 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 in the left column and the right column. The middle of the column will automatically adapt to the spacing changes of the left and right columns. This puts forward a new requirement for the layout, and simply using the float attribute and the percentage attribute cannot be achieved. CSS currently does not support the calculation of percentages to take into account the placeholder of the left and right columns. If 100% is used for the middle column For width, it will use the width of the browser window, rather than the middle spacing between the left and right columns, so we need to rethink this issue. #layout { If #layout uses position:absolute; will become absolute positioning mode. At the same time, when setting top:20px; it will always be 20px above the browser window, and left:0px; will ensure that it is away from the browser The left margin is 0px. . In this way, the left column will be displayed on the left side of the left edge, while the right column will be displayed on the right side by right: 0px; and the #center in the middle will use the normal CSS style: For #center, we no longer need to set its floating method. We just need to have the left outer margin to always maintain the width of #lef and #right, so we can achieve the adaptive width of 202px on both sides, and the left and right sides Distance just allows #left and #right to be displayed in this space, thus achieving the requirements.
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 is mainly automatically adjusted by the browser according to the object's content. However, when this method cannot meet the positioning requirements, a new method is needed. Another type provided by CSS is besides floating positioning. The positioning method is absolute positioning, and absolute positioning is achieved using position attribute.
position Used to set the available values for positioning the object: static/absolute/relative
For every object in the page, the default position property is static. If you set the object to position:absolute, the object will be separated from the document stream and repositioned according to the location of the entire page. When using this property, you can use top, right, bottom, left, that is, the distance value of the four directions of the upper, right, lower and left to determine the specific position of the object. See the following CSS:
position:absolute;
top:20px;
left:0px;
}
Note: If an object is set to position:absolute; it will be essentially separated from other objects, and 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 absolutely positioning, the object will no longer be considered with the floating relationship in the page. You only need to set the object's values in four directions: top, right, bottom, and left.
In this case, using absolute positioning can solve the problem we raised well. Similarly, we use 3 divs to form our three column structures:
#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;
}
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 202px;
margin-left: 202px;
}