Starting from the two-column fixed width, when you start to try the two-column layout, the width of the left and right columns can be adaptive. From the one-column adaptive layout, we know that the adaptive setting is mainly set by the percentage value of the width, so in the two-column The width-adaptive layout also designs the percentage width value. Continuing with the above CSS code, we have to newly define the width value of the second column:
Copy code The code is as follows:
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 20%;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D; float: left;
height: 300px;
width: 70%;
}
The width of the left column is set to 20% of the width, and the width of the right column is set to 20% of the width. 70% of the page looks like a common web page with navigation on the left and content on the right.
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
