CSS Layout Floating (2)

In the previous article, I wrote about two-column floating with fixed width on the left (right) side and automatic scaling on the right (left) side. This article will talk about the issue of three-column floating. As mentioned before, two-column floating is the basis for other multi-column floating. After understanding the principle of two-column floating, multi-column floating of three or more columns becomes simple.

The middle left side has a fixed width, and the right side is adaptive:

Because the left side and the middle side are both fixed width, and only the right side has an adaptive width, so this three-column float is the same as the left side of the two-column float. The same principle applies to the adaptive right side of the fixed width. The HTML structure code is as follows:

< ;head>

I am on the left

I am in the middle

I am on the right

Just make slight changes to the two floating columns of CSS style code:

# a{float:left; width:200px; background:#aaa;}
#b{float:left; width:200px; background:#f00;}
#c{background:#777; margin-left:400px;}

Of course, one thing to remember here is that the b object must be given a left float.

The left side is adaptive, the middle right side has a fixed width:

It is the same as the left side, the middle side has a fixed width, and the right side is adaptive. Of course, the premise is that the three objects a, b, and c must be replaced in the HTML structure code. order, the browser's interpretation order should be c-b-a, because floating is before unfloating:

I am on the left

I am in the middle

I am on the right

CSS code is as follows:

#a{background:#aaa;}
#b{float:right; width:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}

Fixed width on the left and right sides, adaptive in the middle:

This layout should be the most used, because both sides The width of the sidebar is fixed, and then the middle content area is adaptive. This is a common layout method for many websites. Many people will use four DIVs here to complete the layout, namely:

I am on the left

I am the middle

I am on the right

Use a nested DIV to help complete the three-column floating, so that the floating layout can indeed be completed purpose, but the purpose of three-column floating can still be achieved without this nesting. Since one nesting can be omitted, why not omit one? Just change the order of b and c to achieve the goal:

I am on the left

I am on the right

I am in the middle

CSS code is as follows:

#a{float:left; width:200px; background:#aaa;}
#b{ margin-left:200px; margin-right:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}

In this way, based on the two-column floating layout, the three-column floating layout is also completed.

The above is the content of CSS layout floating (2). For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!