แถวและคอลัมน์เดียว

นี่คือคำพูด:

เนื้อความ { ระยะขอบ: 0px; ช่องว่างภายใน: 0px;

#content { ขอบซ้าย:อัตโนมัติ; ขอบขวา:อัตโนมัติ;

สองแถวและหนึ่งคอลัมน์

นี่คือคำพูด:

เนื้อความ { ระยะขอบ: 0px; การขยายข้อความ: 0px;

#content-top { ขอบซ้าย:อัตโนมัติ; ความกว้าง: 400px;

#content-end {ระยะขอบ-ซ้าย:อัตโนมัติ; ความกว้าง: 400px;

สามแถวและหนึ่งคอลัมน์

นี่คือคำพูด:

เนื้อความ { ระยะขอบ: 0px; ช่องว่างภายใน: 0px;

#content-top { ขอบซ้าย:อัตโนมัติ; ความกว้าง: 400px;

#content-mid { ระยะขอบซ้าย:อัตโนมัติ; ความกว้าง: 400px;

#content-end { ระยะขอบซ้าย:อัตโนมัติ; ความกว้าง: 400px;

แถวเดียวและสองคอลัมน์

นี่คือคำพูด:

#bodycenter { ความกว้าง: 700px; ขอบขวา: อัตโนมัติ; ขอบซ้าย: อัตโนมัติ; ล้น: อัตโนมัติ;

#bodycenter #dv1 {ลอย: ซ้าย; ความกว้าง: 280px;}

#bodycenter #dv2 {ลอย: ขวา; ความกว้าง: 410px;}

สองแถวและสองคอลัมน์

นี่คือคำพูด:

#header{ ความกว้าง: 700px; ขอบขวา: อัตโนมัติ; ขอบซ้าย: อัตโนมัติ; ล้น: อัตโนมัติ;}

#bodycenter { ความกว้าง: 700px; ขอบขวา: อัตโนมัติ;

#bodycenter #dv1 { ลอย: ซ้าย; ความกว้าง: 280px;}

#bodycenter #dv2 { ลอย: ขวา; ความกว้าง: 410px;}

สามแถวและสองคอลัมน์

นี่คือคำพูด:

#header{ ความกว้าง: 700px; ขอบขวา: อัตโนมัติ;

#bodycenter {ความกว้าง: 700px; ขอบซ้าย: อัตโนมัติ;

#bodycenter #dv1 { ลอย: ซ้าย; ความกว้าง: 280px;}

#bodycenter #dv2 { ลอย: ขวา; ความกว้าง: 410px;}

#footer{ ความกว้าง: 700px; ขอบซ้าย: อัตโนมัติ;

แถวเดียวและสามคอลัมน์

ตำแหน่งที่แน่นอน

นี่คือคำพูด:

#left { ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ความกว้าง: 120px;

#middle {ระยะขอบ: 20px 190px 20px 190px;

#right {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ความกว้าง: 120px;}

ลอยตำแหน่งหนึ่ง

xhtml:

นี่คือคำพูด:

ซีเอสเอส:

นี่คือคำพูด:

#wrap{ ความกว้าง:100%; ความสูง:อัตโนมัติ;}

#column { ลอย: ซ้าย; ความกว้าง: 60%;}

# คอลัมน์ 1 { ลอย: ซ้าย; ความกว้าง: 30%;}

# คอลัมน์ 2 { ลอย: ขวา; ความกว้าง: 30%;}

# คอลัมน์ 3 { ลอย: ขวา; ความกว้าง: 40%;}

.clear{ ชัดเจน:ทั้งสอง;}

ลอยตำแหน่งสอง

xhtml:

นี่คือคำพูด:

ซีเอสเอส:

นี่คือคำพูด:

เนื้อความ {ระยะขอบ: 0; ช่องว่างภายในซ้าย: 200px; ช่องว่างภายในด้านขวา: 190px; ความกว้างขั้นต่ำ: 240px;}

.column {ตำแหน่ง: ญาติ;ลอย: ซ้าย;}

#center {ความกว้าง: 100%;}

#left {ความกว้าง: 180px; ขวา: 240px; ขอบซ้าย: -100%;}

#right {ความกว้าง: 130px; ระยะขอบขวา: -100%;}

สองแถวและสามคอลัมน์

xhtml:

นี่คือคำพูด:

ซีเอสเอส:

นี่คือคำพูด:

#ส่วนหัว{ความกว้าง:100%; ความสูง:อัตโนมัติ;}

#wrap{ ความกว้าง:100%; ความสูง:อัตโนมัติ;}

#column { ลอย: ซ้าย; ความกว้าง: 60%;}

# คอลัมน์ 1 { ลอย: ซ้าย; ความกว้าง: 30%;}

# คอลัมน์ 2 { ลอย: ขวา; ความกว้าง: 30%;}

# คอลัมน์ 3 { ลอย: ขวา; ความกว้าง: 40%;}

.clear{ ชัดเจน:ทั้งสอง;}

สามแถวและสามคอลัมน์

xhtml:

นี่คือคำพูด:

ซีเอสเอส:

นี่คือคำพูด:

#ส่วนหัว{ความกว้าง:100%; ความสูง:อัตโนมัติ;}

#wrap{ ความกว้าง:100%; ความสูง:อัตโนมัติ;}

#column { ลอย: ซ้าย; ความกว้าง: 60%;}

# คอลัมน์ 1 { ลอย: ซ้าย; ความกว้าง: 30%;}

# คอลัมน์ 2 { ลอย: ขวา; ความกว้าง: 30%;}

# คอลัมน์ 3 { ลอย: ขวา; ความกว้าง: 40%;}

.clear{ ชัดเจน:ทั้งสอง;}

#ส่วนท้าย{ความกว้าง:100%; ความสูง:อัตโนมัติ;}

PS: ตัวอย่างที่แสดงไว้ที่นี่เป็นตัวอย่างที่ใช้กันทั่วไป ไม่ใช่เพื่อวัตถุประสงค์ในการวิจัย สำหรับแต่ละกล่อง ระยะขอบ ช่องว่างภายใน Boeder และคุณลักษณะอื่น ๆ ไม่ได้ถูกกำหนดไว้!