In practical applications, the left column is sometimes required to be fixed width, the right column according to the browser window size automatically adapt, in the CSS to achieve such a layout is simple and feasible, just set the width of the left column, as in the example in the left and right columns are used to achieve the width of the adaptive, and we only need to set the width of the left column to a fixed value, The right column does not set any width values, and the right column does not float and the code is as follows:
Copy Code code 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;
}
This way, the left column renders a width of 100%, and the right column adapts to the size of the browser window.
<textarea id="runcode35851"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> two column left column fixed, right column width adaptive--aa25. cn</title> <style type= "Text/css" > <!--#left {background-color: #E8F5FE; border:1px solid #A9C9E2; Float:left; height:300px; width:200px; } #right {background-color: #F2FDDB; border:1px solid #A5CF3D; height:300px; }--> </style> </pead> <body> <div id= "left" > Left-Hand column--fixed (AA25. CN) </div> <div id= "Right" > Right-hand column--width adaptive (AA25. CN) </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Two columns right column width adaptive often on the website in use, injustice is the right column, can also be the left column, the method is the same, only need to change the two div can be written, and this application in the current many blogs can often see, such as Pjblog in many of the user-made template is this layout.
The production process is no longer detailed here, please refer to the previous tutorial: CSS Web page layout Getting Started Tutorial 5: Two column width adaptive, just change the width of the left column to 200px, the right column width and left floating away. If you do not understand the place you can ask below or leave a message in the message.
