In practical applications, sometimes it is necessary to have a fixed width of the left column and the right column to automatically adapt according to the size of the browser window. It is simple and feasible to implement such a layout in CSS. You only need to set the width of the left column, as in the above example. Both the left and right columns use percentages to implement width adaptation, and we only need to set the width of the left column to a fixed value, do not set any width value for the right column, and the right column does not float. The code is as follows:
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border : 1px solid #A5CF3D;
height: 300px;
}
In this way, the left column will show 100% width, and the right column will adapt according to the browser window size.
Two-column right column width adaptive is often used on websites. It is not fair to use the right column or the left column. The method is the same. You only need to change the writing of the two divs. This application is currently in use. You can often see it on many blogs. For example, many netizens in pjblog have templates with this layout.
The production process will not be described in detail here. Please refer to the previous tutorial: CSS Web Page Layout Introduction Tutorial 5: Two-column width adaptive, just change the width of the left column to 200px, and remove the width and left floating of the right column. That
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
