Web Front End Learning notes (CSS change width layout)

Posted on2013-09-30 09:03 Stephen_liu Read (2406) Comments (6) Edit Collection

One, "1-2-1" single-column variable width layout:

For a variable-width layout, the overall width of the content changes with the width of the browser window first. Therefore, the total width of the left and right columns in the middle of the container container changes, which results in a different situation. The two columns change at a certain rate, or one column is fixed and the other changes. Both of these are very common layout methods. However, it's relatively simple for the 1-2-1, and it's very similar to the way I laid out in my last blog, so this is just about a case where the other column is fixed.
In real-world applications, only single-row widths change, while others that maintain a fixed layout may be more practical. Generally in the presence of multiple columns of a page, usually a relatively wide column is used to place content, and narrow columns to place links, navigation and other content, the general width is fixed, do not need to expand. So it would be a good way to set the content column to be changeable and the other columns to be fixed.
For the combined reasons, the blog will just give a key outline of the CSS.

：

Principle Analysis:

The core problem is that the width of the floating column should be equal to "100%-300px", while the CSS obviously does not support this method of expressing the width with the subtraction operation. However, this width can be flexibly achieved by margin. The implementation of the principle is, in the content of a div, that is, the figure of Contentwrap, so that its width of 100%, that is, equal to the width of container. Then, by setting its margin-left to -300px, it shifts the 300px to pan left. Then the content of the Margin-left set to positive 300px, the implementation of the "100%-300px" This can not be expressed in width. At this time, content in the Contentwrap, in the form of a standard flow, will its left margin set to 300px, you can ensure that the contents of the inside will not overflow to the outside of the layout. The biggest benefit of this approach is that you don't have to consider the height of each column, and by setting the Clear:both property of the footer, you can guarantee that there will be no overlap.

CSS Summary code:

#header, #footer, #container {    margin:0 auto;    width:85%;} #contentWrap {    margin-left: -300px;    Float:left;    width:100%;} #content {    margin-left:300px;} #side {    float:right;    width:300px;} #footer {    Clear:both;}

Two, "1-3-1" single-side column width fixed variable width layout:

For a fixed column, the other two columns proportional to the width of the case, if the fixed column on the left or the right side, then only need to set a div outside the two widening columns, and the div width is widened. It is easy to implement with a fixed-width column next to a single-column fixed "1-2-1" layout, and then scale the two widening columns of the widening column proportionally. For the Contentwrap container in the example above, if there is only one div activity column inside, as in the "1-2-1" layout above, this activity column is placed in the standard flow mode, and its width is naturally formed, so that the display effect is no problem. When there are two floating active columns in the Contentwrap container, you need to set the widths separately, for example, 40% and 60% (to avoid rounding errors, set 59.9% here). It is important to note that the width of the contentwrap column is equal to the width of container, so the 40% here is not the total width minus the width of the side after 40%, but the total width of 40%, which is obviously not what we want. The solution is to set a div inside the container, that is, the original one contentwrap into two layers, respectively called Outerwrap and Innerwrap.

：

Principle Analysis:

The newly added innerwrap is present in the standard flow mode, the width will naturally stretch, because the left margin of 200px is set, so its width is the total width minus 200px, so that The Navi and content in the Innerwrap will be based on the width of this new width.

CSS Summary code:

#header, #footer, #container {    margin:0 auto;    width:85%;} #outerWrap {    float:left;    width:100%;    Margin-left: -200px;} #innerWrap {    margin-left:200px;} #navi {    float:left;    width:40%;} #content {    float:right;    width:59.5%;} #side {    float:right;    width:200px;} #footer {    Clear:both;}

Three, "1-3-1" in the middle column width fixed widening layout:

The layout is described here, the fixed column is placed in the middle, it has a column around the left and right, and proportionally to the total width. This is a very rare layout way, the reason is only for the research and practice of CSS.

：

Principle Analysis:

This is based on a fixed "1-3-1" layout. Now you need to set up a div and wrap them around the Navi and side two Div. Set the left Naviwrap to 50% width, float to the left, and move 150px to pan left by setting Margin-left to -150px. Then in the inside of the Navi, the left Margin-left is set to 150px, compensate back this 150px. Next, set the content to a fixed width and float first, which clings to the right edge of the Navi. Finally, the sidewrap is treated like a navi part, set to 50% width and float to the right. At this point the width is already more than 100%, will be squeezed to the next line, but the right margin-right is set to -150px , it will not exceed the total width.

CSS Summary code:

#header, #footer, #container {    margin:0 auto;    width:85%;} #naviWrap {    width:50%;    Float:left;    Margin-left: -150px;} #navi {    margin-left:150px;} #content {    float:left;    width:300px;} #sideWrap {    width:49.9%;    Float:right;    margin-right:-150px;} #side {    margin-right:150px;} #footer {    Clear:both;}

Four, "1-3-1" double-sided column width fixed variable width layout:

For a three-column layout, a useful layout is that the left and right columns in the 3 column are fixed in width and the middle column width is adaptive.

：

Principle Analysis:

Consider the left and middle two columns as a group, as an active column, and a column on the right as a fixed column. Then the two columns are treated as separate columns, the left is a fixed column, and the content is the variable width column. When you use this method, you need to add additional auxiliary div for each active column you implement. The idea here is that, in the inner layer, in order to make the Navi fixed, the content becomes wider, a "innerwrap" div is set outside the two, and a "Contentwrap" is set up outside the content in order to make the content wider in the innerwrap. div; In the same vein, in order for the Innerwrap to widen and set a outerwrap for it, the structure becomes complex. But actually the principle is the same.

CSS Summary code:

#header, #footer, #container {    margin:0 auto;    width:85%;} #side {    width:200px;    Float:right;} #outerWrap {    width:100%;    Float:left;    Margin-left: -200px;} #innerWrap {    margin-left:200px;} #navi {    width:150px;    Float:left;} #contentWrap {    width:100%;    Float:right;    Margin-right: -150px;} #content {    margin-right:150px;} #footer {    Clear:both;}

Five, "1-3-1" in the column and the width of the side of a fixed widening layout:

The layout is described here as the middle column and the column on its side is fixed width, and the other side of the column width is adaptive.

：

Principle Analysis:

Suppose you still want the width of the Navi and content columns on the left to be fixed to 150px and 250px, respectively, to the right of the side column width. Then the width of the side column is equal to "100%-150px-250px". The method sets a sidewrap column outside the side column, making the sidewrap width 100%, and panning it to the right by setting margin-right to -400pxto 400px. Then set the positive margin-rightto the side column, limiting the right boundary, so that you can achieve the desired effect.

CSS Summary code:

#header, #footer, #container {    margin:0 auto;    width:85%;} #navi {    flaot:left;    width:150px;} #content {    float:left;    width:250px;} #sideWrap {    float:right;    width:100%;    Margin-right: -400px;} #side {    margin-right:400px;} #footer {    Clear:both;}

Note: This blog from the "CSS design thorough research" in the 14th chapter, the book's examples are concise, easy to understand, so select some of the main content to share with you, but also for the future of their own online access.

Web Front End Learning notes (CSS change width layout)