With a fixed width as the basis, two column fixed width is very simple, we know that Div is used to identify an area, and two columns of the layout, naturally need to use two div,xhtml code as follows:
Copy CodeThe code is as follows:
Left column
Right column
The new code structure uses two IDs, left and right, to represent the names of the two Div, what we need to do is to set the width for them first, and then let the two div appear side by row in the horizontal line, resulting in a two-column layout with the CSS code as follows:
<textarea id="runcode47651"><! 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 fixed width--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; Float:left; height:300px; width:200px; --</style> </pead> <body> Zolie columns </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
The code for left and right two Div is similar to the previous one, all using the same width and height, in this case, for the sake of distinction, a different border and a background color are used for each column. To achieve the two-column layout, we used a completely new attribute,--float. The Float property is a very important property in the CSS layout for controlling the floating layout, and most of our div layouts are basically implemented with float control, with the optional parameters of float: none/left/right.
When float uses the None value to indicate that the object does not float, and when left is used, the object will float to the right, for example, the DIV in this example uses Float:left, and then the content on the right side of the current object. When you use right, the object floats to the left, and if you set the float value of left to right, it will float the leftmost object to the side of the page, while the Float:left property floats to the side of the page.
In this way, after the simple float property is used, the two-column fixed-width can be fully displayed.
The following are the steps:
New page, insert Div can refer to: CSS page layout get started Tutorial 1: A fixed width of a column
When inserting a div and then inserting the second one, inserting a div tag adds an option: wrapping the selection next to it, inserting the div tag into the left Div, which is not the result of this example, so we choose to follow the label It is then found in the active drop-down list on the right, so that the div that we inserted with the ID is right behind the left. As shown in the following:
The left CSS settings are as follows:
The right setting is different from the left border and background color, so you can refer to the left self-setting.
