Use CSS and masterpage for flexible Layout

Use CSS for flexible Column Layout

I. Opening

Most of the current websites use column layout. The common situations are as follows:

 

InASP. NETThe duplicate parts of each page can be written inMasterpage(For exampleHeader,FooterAndBody).

SoBodyThe column layout is written to the endMasterpageIs it written once on every page?

In my opinion, there are three methods:

1InMasterpageWrite onlyBody,BodyThe column layout is written by each page. This method looks flexible (the width of each page can be set at will), but it is very inconvenient for future modifications;

2BodyThe layout of columns inMasterpageTo use thisMasterpageThe number of columns and column width have been fixed. HoweverMasterpageOnly one column layout can be implemented, and the website may look monotonous;

3If you want to implement multi-medium column layout in a site, write one for each column wide LayoutMasterpageWhich layout is used for the page?Masterpage. HoweverMasterpageThere is also a public part, which can be nested with another layerMasterpage;

It seems that the last method analyzed just now is quite good, but I think this method must be added a lotMasterpage(Each column layout requires one). In this way, it is inconvenient for me to change a column layout for a page. The best way is to use oneMasterpageMultiple column la s are implemented! Let me introduce this method now.

Ii. Solution

InMasterpageOfBodyPlacement in3Columns (Div),IDAreSideleft,Main,Sideright, Representing the left column, the middle column, and the right column. In the three columnsDivInner placementContentplaceholderTo fill in the specific page.MasterFileCodeAs follows:

 

If you do not want to display this column on a specific page, do not<Asp: Content/>To display this column<Asp: Content/>First add a layerDivAnd you need to set thisDivOfClassIsInner(Other names are also supported ). The key lies in settingCSSNow,CSSAs follows:

If<Asp: Content/>If no content is writtenMasterpageIn this columnDivIt is actually empty, so this column is automatically hidden. If<Asp: Content/>Which are<Div class = "inner"> </div>, Then# Leftside. InnerIt will take effect, so that the left side immediately has200pxThe principle of this column on the right is also the same. This column is required in any layout (select this column when you only need a column layout ), and it always occupies the remaining width except the left and right columns (if any.

Note: # If the height in main is not set to 1%, it cannot be correctly displayed in IE.

the layout of this method is also insufficient, for example, a layout column can only have 3 column; in some cases, class Inner Div some unnecessary. But in general, this method can basically meet the layout requirements of all columns of a site, and is worth using in practice.