16 cases of basic layout of CSS

xiaoxiao2021-03-06  62

Author: Owen Briggs 2004-6-25 13:44:32

The following information on the layout of the original author: Owen Briggs

Single row

Single row 1: Float floats in the upper left corner, fixed width. Single line single column 2: fixed to the upper left corner, fixed width, is an absolute (ABSOLUTE) positioning. Single line single column 3: fixed to the upper left corner, no fixed width, using a percentage (%) defined width from the adaptation page. Single-line single column 4 (recommended): fixed width, use in the Body style defined in the cordial property (Text-align: center;) implementation adaptation page automatic home.

Single line two columns

Two columns of two columns 1: Two columns are fixed width. The first column floats in the upper left corner, the second row floates to the right of the first column. Two columns of two columns 2: Two columns percentage width, but not full screen. The first column is fixed in the upper left corner, and the second row floates to the right of the first column. One line of two columns 3: Two columns percentage width, full screen. Both columns use absolute positioning. Two columns of two columns 4: Two columns are percentage width, full screen. The first column floats in the upper left corner, the second row floats in the upper right corner. Two rows of two columns 5: Two columns are percentage width, full screen. The first column floats in the upper left corner, the second row floates to the right of the first column.

Single line three columns

Single line three columns 1: The left and right columns are absolutely positioned (right columns are located on the right). The left column and the right column fixed width, the intermediate column adaptive page. Single line three columns 2: The left column is positioned on the left, and the right column is positioned on the right, and the middle is floating on the right side of the left column. The left column and the right column fixed width, the intermediate column adaptive page. Single line three columns 3: three columns are absolutely positioned. The left column and the right column fixed width, the intermediate column is adaptive according to the content. Single line three columns 4 (recommended): similar pattern 2, just add Margin: 20px attributes in the Body style, solve the problem of the middle column in Netscape6.0. Single line three columns 5: Left and right columns absolutely positioned, middle columns are adaptive. Width full screen.

Top line three columns

Top line three columns 1 (recommended): Top adaptive page width. Left right column absolute positioning, the middle column adaptive page. Top three columns 2: Width full screen

转载请注明原文地址:https://www.9cbs.com/read-119896.html

New Post(0)