css div layout,CSS Layout - 如何基于div的列布局

#header {

height: 120px;

background-color: #cccccc;

padding: 10px;

}

#navigation {

height: 40px;

line-height: 40px;

background-color: #efefef;

padding: 10px;

}

.column1of3, .column2of3, .column3of3 {

float: left;

width: 280px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of3, .column2of3, .columns1and2of3 {

margin-right: 20px;

}

.columns1and2of3, .columns2and3of3 {

float: left;

width: 600px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of4, .column2of4, .column3of4, .column4of4 {

float: left;

width: 200px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of4, .column2of4, .column3of4 {

margin-right: 20px;

}

.columns2and3and4of4 {

float: left;

width: 680px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of6, .column2of6, .column3of6, .column4of6, .column5of6,

.column6of6 {

float: left;

width: 120px;

background-color: #cccccc;

padding: 10px;

margin-top: 20px;

}

.column1of6, .column2of6, .column3of6, .column4of6, .column5of6 {

margin-right: 20px;

}

.column1of3, .column1of4, .column1of6 {

clear: both;

}

#footer {

height: 40px;

clear: both;

border-top: 20px solid #ffffff;

padding: 10px;

background-color: #cccccc;

}

#page {

padding: 0px 10px 10px 10px;

width: 940px;

background-color: #ffffff;

}

#frame {

margin-left: auto;

margin-right: auto;

width: 960px;

background-color: #ffffff;

}

body {

background-color: #efefef;

margin: 0px;

}

header

navigation

column 1 of 3

column 2 of 3

column 3 of 3

column 1 of 3

columns 2 and 3 of 3

columns 1 and 2 of 3

column 3 of 3

column 1 of 4

column 2 of 4

column 3 of 4

column 4 of 4

column 1 of 4

columns 2 and 3 and 4 of 4

column 1 of 6

column 2 of 6

column 3 of 6

column 4 of 6

column 5 of 6

column 6 of 6

column 1 of 3

column 2 of 3

column 5 of 6

column 6 of 6

columns 1 and 2 of 3

column 5 of 6

column 6 of 6

footer