แถวและคอลัมน์เดียว
นี่คือคำพูด:
เนื้อความ { ระยะขอบ: 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:
นี่คือคำพูด:
<div id="วิปริต">
<div id="คอลัมน์">
<div id="column1">นี่คือคอลัมน์แรก</div>
<div id="column2">นี่คือคอลัมน์ที่สอง</div>
<div class="clear"></div>
</div>
<div id="column3">นี่คือคอลัมน์ที่สาม</div>
<div class="clear"></div>
</div>
ซีเอสเอส:
นี่คือคำพูด:
#wrap{ ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#column { ลอย: ซ้าย; ความกว้าง: 60%;}
# คอลัมน์ 1 { ลอย: ซ้าย; ความกว้าง: 30%;}
# คอลัมน์ 2 { ลอย: ขวา; ความกว้าง: 30%;}
# คอลัมน์ 3 { ลอย: ขวา; ความกว้าง: 40%;}
.clear{ ชัดเจน:ทั้งสอง;}
ลอยตำแหน่งสอง
xhtml:
นี่คือคำพูด:
<div id="center" class="column">
<h1>นี่คือเนื้อหาหลัก</h1>
</div>
<div id="left" class="column">
<h2>นี่คือแถบด้านข้างซ้าย</h2>
</div>
<div id="right" class="column">
<h2>นี่คือแถบด้านข้างทางขวา</h2>
</div>
ซีเอสเอส:
นี่คือคำพูด:
เนื้อความ {ระยะขอบ: 0; ช่องว่างภายในซ้าย: 200px; ช่องว่างภายในด้านขวา: 190px; ความกว้างขั้นต่ำ: 240px;}
.column {ตำแหน่ง: ญาติ;ลอย: ซ้าย;}
#center {ความกว้าง: 100%;}
#left {ความกว้าง: 180px; ขวา: 240px; ขอบซ้าย: -100%;}
#right {ความกว้าง: 130px; ระยะขอบขวา: -100%;}
สองแถวและสามคอลัมน์
xhtml:
นี่คือคำพูด:
<div id="header">นี่คือแถวบนสุด</div>
<div id="วิปริต">
<div id="คอลัมน์">
<div id="column1">นี่คือคอลัมน์แรก</div>
<div id="column2">นี่คือคอลัมน์ที่สอง</div>
<div class="clear"></div>
</div>
<div id="column3">นี่คือคอลัมน์ที่สาม</div>
<div class="clear"></div>
</div>
ซีเอสเอส:
นี่คือคำพูด:
#ส่วนหัว{ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#wrap{ ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#column { ลอย: ซ้าย; ความกว้าง: 60%;}
# คอลัมน์ 1 { ลอย: ซ้าย; ความกว้าง: 30%;}
# คอลัมน์ 2 { ลอย: ขวา; ความกว้าง: 30%;}
# คอลัมน์ 3 { ลอย: ขวา; ความกว้าง: 40%;}
.clear{ ชัดเจน:ทั้งสอง;}
สามแถวและสามคอลัมน์
xhtml:
นี่คือคำพูด:
<div id="header">นี่คือแถวบนสุด</div>
<div id="วิปริต">
<div id="คอลัมน์">
<div id="column1">นี่คือคอลัมน์แรก</div>
<div id="column2">นี่คือคอลัมน์ที่สอง</div>
<div class="clear"></div>
</div>
<div id="column3">นี่คือคอลัมน์ที่สาม</div>
<div class="clear"></div>
</div>
<div id="footer">นี่คือแถวล่างสุด</div>
ซีเอสเอส:
นี่คือคำพูด:
#ส่วนหัว{ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#wrap{ ความกว้าง:100%; ความสูง:อัตโนมัติ;}
#column { ลอย: ซ้าย; ความกว้าง: 60%;}
# คอลัมน์ 1 { ลอย: ซ้าย; ความกว้าง: 30%;}
# คอลัมน์ 2 { ลอย: ขวา; ความกว้าง: 30%;}
# คอลัมน์ 3 { ลอย: ขวา; ความกว้าง: 40%;}
.clear{ ชัดเจน:ทั้งสอง;}
#ส่วนท้าย{ความกว้าง:100%; ความสูง:อัตโนมัติ;}
PS: ตัวอย่างที่แสดงไว้ที่นี่เป็นตัวอย่างที่ใช้กันทั่วไป ไม่ใช่เพื่อวัตถุประสงค์ในการวิจัย สำหรับแต่ละกล่อง ระยะขอบ ช่องว่างภายใน Boeder และคุณลักษณะอื่น ๆ ไม่ได้ถูกกำหนดไว้!