16 examples of excellent CSS basic layout

Single Row Single Column

Single Row Single Column 1: float floating in the upper left corner, fixed width.

# Content {float: left; padding: 10px; margin: 20px; background: # FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */voice-family: "\" }\\ ""; voice-family: inherit; width: 370px;} html> body # content {width: 370px;/* ie5win fudge ends */}

Single Row Single Column 2

: Fixed in the upper left corner, fixed width, using absolute (absolute) positioning.

# Content {position: absolute; top: 0px; left: 0px; padding: 10px; margin: 20px; background: # FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */voice-family: "\" }\\ ""; voice-family: inherit; width: 370px;} html> body # content {width: 370px;/* ie5win fudge ends */}

Single Row, single column, 3

: Fixed in the upper left corner, not fixed width, use percentage (%) to define the width from the Adaptive Page.

Single Row, single column, 4

(Recommended): fixed width. The center attribute (text-align: center;) is defined in the body style to automatically center the page.

Single Row and two columns

Single Row and two columns 1: both columns have fixed width. The first column floated in the upper left corner, and the second column floated to the right of the first column.

Single Row, two columns, 2

: The percentage width of both columns, but not the screen. The first column is fixed in the upper left corner, and the second column is floating on the right of the first column.

Single Row, two columns, 3

: Percentage width of both columns, full screen. Both columns adopt absolute positioning.

Single Row, two columns, 4

: Percentage width of both columns, full screen. The first column floats in the upper left corner, and the second column floats in the upper right corner.

Single Row, two columns, 5

: Percentage width of both columns, full screen. The first column floated in the upper left corner, and the second column floated to the right of the first column.

Single Row and three columns

Single Row, three columns 1: The left and right columns are absolutely positioned (the right column is located on the top right ). The left and right columns are fixed in width and the middle columns are adaptive to the page.

Single Row, three columns, 2

: The left column is located on the top left, the right column is located on the top right, and the middle column is positioned on the right of the left column. The left and right columns are fixed in width and the middle columns are adaptive to the page.

Single Row, three columns, and three columns

: All three columns are absolutely positioned. The left and right columns are fixed in width, and the middle columns are adaptive to the content.

Single Row, three columns, and four

(Recommended): similar to style 2, it only adds the margin: 20px attribute to the body style, solving the problem of setting the intermediate column to the top of Netscape6.0.

Single Row, three columns, and five

: The left and right columns are absolutely positioned and the middle columns are adaptive. Width full screen.

Top row and three columns

Top row, three columns, 1 (recommended): Top row, Adaptive Page width. Absolute positioning of left and right columns, Adaptive Page of middle columns.

• Top row, three columns, and two

: Full Screen in width