CSS3 หลายคอลัมน์เค้าโครง
รูปแบบ CSS3 หลายคอลัมน์ช่วยให้ความหมายได้ง่ายหลายคอลัมน์ของข้อความ - เช่นเดียวกับในหนังสือพิมพ์:
เดลี่ Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit- หรือ -moz- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
CSS3 คุณสมบัติหลายคอลัมน์
ในบทนี้คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติของหลายคอลัมน์ต่อไปนี้:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 สร้างหลายคอลัมน์
column-count คุณสมบัติระบุจำนวนคอลัมน์องค์ประกอบควรจะแบ่งออกเป็น
ตัวอย่างต่อไปนี้จะแบ่งข้อความในส่วน <div> องค์ประกอบเป็น 3 คอลัมน์:
ตัวอย่าง
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
ลองตัวเอง» CSS3 ระบุช่องว่างระหว่างคอลัมน์
column-gap ของสถานที่ให้ระบุช่องว่างระหว่างคอลัมน์
ตัวอย่างต่อไปนี้ระบุช่องว่างระหว่างพิกเซล 40 คอลัมน์:
ตัวอย่าง
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
ลองตัวเอง» CSS3 กฎคอลัมน์
column-rule-style คุณสมบัติระบุลักษณะของการปกครองระหว่างคอลัมน์:
ตัวอย่าง
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
ลองตัวเอง» column-rule-width คุณสมบัติระบุความกว้างของการปกครองระหว่างคอลัมน์:
ตัวอย่าง
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
ลองตัวเอง» column-rule-color คุณสมบัติระบุสีของการปกครองระหว่างคอลัมน์:
ตัวอย่าง
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
ลองตัวเอง» column-rule คุณสมบัติเป็นที่พักชวเลขสำหรับการตั้งค่าทั้งหมดคอลัมน์ rule- คุณสมบัติดังกล่าวข้างต้น *
ตัวอย่างต่อไปนี้กำหนดความกว้างสไตล์และสีของกฎระหว่างคอลัมน์:
ตัวอย่าง
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
ลองตัวเอง» คอลัมน์ระบุวิธีการหลายองค์ประกอบควร Span
column-span คุณสมบัติระบุจำนวนคอลัมน์องค์ประกอบควรช่วงข้าม
ตัวอย่างต่อไปนี้ระบุว่า <h2> องค์ประกอบควรครอบคลุมทั่วทุกคอลัมน์:
ระบุความกว้างของคอลัมน์
column-width คุณสมบัติระบุปัญหาความกว้างที่เหมาะสมสำหรับคอลัมน์
ตัวอย่างต่อไปนี้ระบุว่าปัญหาความกว้างที่เหมาะสมสำหรับคอลัมน์ที่ควรจะ 100px:
ตัวอย่าง
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
ลองตัวเอง» CSS3 คุณสมบัติหลายคอลัมน์
ตารางต่อไปนี้แสดงทุกคุณสมบัติหลายคอลัมน์:
| คุณสมบัติ | ลักษณะ |
|---|---|
| column-count | ระบุจำนวนคอลัมน์องค์ประกอบควรจะแบ่งออกเป็น |
| column-fill | ระบุวิธีการกรอกคอลัมน์ |
| column-gap | ระบุช่องว่างระหว่างคอลัมน์ |
| column-rule | สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าทั้งหมดคอลัมน์ rule- คุณสมบัติ * |
| column-rule-color | ระบุสีของการปกครองระหว่างคอลัมน์ |
| column-rule-style | ระบุลักษณะของการปกครองระหว่างคอลัมน์ |
| column-rule-width | ระบุความกว้างของการปกครองระหว่างคอลัมน์ |
| column-span | ระบุจำนวนคอลัมน์องค์ประกอบควรช่วงข้าม |
| column-width | ระบุปัญหาความกว้างที่เหมาะสมสำหรับคอลัมน์ |
| columns | สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าคอลัมน์กว้างและคอลัมน์นับ |