CSS3 หลายคอลัมน์
เนื้อหาข้อความ CSS3 สามารถออกแบบให้เหมือนกับรูปแบบหลายคอลัมน์ในหนังสือพิมพ์ตัวอย่างต่อไปนี้:
กวดวิชานี้ - วิทยาศาสตร์ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน! กวดวิชานี้ (www.w3big.com) ให้สมบูรณ์แบบมากที่สุดกวดวิชาเทคโนโลยีการเขียนโปรแกรมตามแนะนำพื้นฐานของ HTML, CSS, JavaScript, งูหลาม, Java, Ruby, C, PHP, MySQL และการเขียนโปรแกรมภาษาอื่น ๆ แต่เว็บไซต์ยังมีจำนวนตัวอย่างออนไลน์โดยวิธีการเช่นนี้คุณจะสามารถเรียนรู้การเขียนโปรแกรม
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์ครั้งแรกเพื่อรองรับจำนวนวิธีรุ่น
ทันทีหลังจากที่เบราว์เซอร์จำนวน -webkit- หรือ -moz- คำนำหน้าระบุ
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| คอลัมน์นับ | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| คอลัมน์ช่องว่าง | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| คอลัมน์กฎ | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| คอลัมน์กฎสี | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| คอลัมน์กฎสไตล์ | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| คอลัมน์กฎกว้าง | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| คอลัมน์กว้าง | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
CSS3 คุณสมบัติหลายคอลัมน์
บทนี้เราจะได้เรียนรู้คุณสมบัติอีกไม่กี่คอลัมน์ CSS3:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 การสร้างหลายคอลัมน์
column-count แอตทริบิวต์ระบุจำนวนของคอลัมน์ที่จะต้องมีการแยก
ตัวอย่างต่อไปนี้ <div> ในข้อความจะถูกแบ่งออกเป็นสาม:
ตัวอย่าง
-webkit คอลัมน์นับ: 3; / * Chrome, Safari, Opera * /
-moz คอลัมน์นับ: 3; / * Firefox * /
คอลัมน์นับ: 3;
}
ลอง»
ช่องว่างหลายคอลัมน์ CSS3 ระหว่างคอลัมน์และคอลัมน์
column-gap ของสถานที่ให้ระบุช่องว่างระหว่างเสาและคอลัมน์
ตัวอย่างต่อไปนี้ระบุช่องว่างระหว่างคอลัมน์และคอลัมน์ที่เป็น 40 พิกเซล:
ตัวอย่าง
-webkit คอลัมน์ช่องว่าง: 40px; / * Chrome, Safari, Opera * /
-moz คอลัมน์ช่องว่าง: 40px; / * Firefox * /
คอลัมน์ช่องว่าง: 40px;
}
ลอง»
คอลัมน์พรมแดน CSS3
column-rule-style คุณสมบัติระบุคอลัมน์สไตล์ชายแดนระหว่างคอลัมน์:
ตัวอย่าง
-webkit คอลัมน์กฎสไตล์: ของแข็ง; / * Chrome, Safari, Opera * /
-moz คอลัมน์กฎสไตล์: ของแข็ง; / * Firefox * /
คอลัมน์กฎสไตล์: ของแข็ง
}
ลอง»
column-rule-width แอตทริบิวต์ระบุความหนาชายแดนของทั้งสอง:
ตัวอย่าง
-webkit คอลัมน์กฎความกว้าง: 1px; / * Chrome, Safari, Opera * /
-moz คอลัมน์กฎความกว้าง: 1px; / * Firefox * /
คอลัมน์กฎความกว้าง: 1px;
}
ลอง»
column-rule-color แอตทริบิวต์ระบุสีของชายแดนของทั้งสองไปนี้:
ตัวอย่าง
-webkit คอลัมน์กฎสี: lightblue; / * Chrome, Safari, Opera * /
-moz คอลัมน์กฎสี: lightblue; / * Firefox * /
คอลัมน์กฎสี: lightblue;
}
ลอง»
column-rule คุณสมบัติจดชวเลขสำหรับทุกคอลัมน์ rule- คุณสมบัติ *
ตัวอย่างต่อไปนี้ชุดคอลัมน์โดยตรงเพื่อความหนาของเส้นขอบสีและรูปแบบ:
ตัวอย่าง
-webkit คอลัมน์กฎ: 1px ของแข็ง lightblue; / * Chrome, Safari, Opera * /
-moz คอลัมน์กฎ: 1px ของแข็ง lightblue; / * Firefox * /
คอลัมน์กฎ: 1px ของแข็ง lightblue;
}
ลอง»
วิธีการหลายคอลัมน์ข้ามองค์ประกอบที่ระบุ
ตัวอย่างต่อไปนี้ระบุ <h2> องค์ประกอบคอลัมน์ทั้งหมด:
ตัวอย่าง
-webkit คอลัมน์ช่วง: ทั้งหมด; / * Chrome, Safari, Opera * /
คอลัมน์ช่วง: ทั้งหมด
}
ลอง»
ระบุความกว้างของคอลัมน์
column-width แอตทริบิวต์ระบุความกว้างของคอลัมน์
ตัวอย่าง
-webkit คอลัมน์กว้าง: 100px; / * Chrome, Safari, Opera * /
คอลัมน์กว้าง: 100px;
}
ลอง»
CSS3 คุณสมบัติหลายคอลัมน์
ตารางต่อไปนี้แสดงคุณลักษณะทั้งหมดของ CSS3 หลายคอลัมน์:
| คุณสมบัติ | ลักษณะ |
|---|---|
| คอลัมน์นับ | จำนวนคอลัมน์ที่ระบุองค์ประกอบควรจะแบ่งออก |
| คอลัมน์เติม | ระบุวิธีการกรอกคอลัมน์ |
| คอลัมน์ช่องว่าง | ระบุช่องว่างระหว่างเสาและคอลัมน์ |
| คอลัมน์กฎ | คอลัมน์ rule- ทั้งหมด * คุณสมบัติจดชวเลข |
| คอลัมน์กฎสี | ระบุสีของชายแดนระหว่างสอง |
| คอลัมน์กฎสไตล์ | ระบุรูปแบบของชายแดนระหว่างสอง |
| คอลัมน์กฎกว้าง | ระบุความหนาของชายแดนระหว่างสอง |
| คอลัมน์ช่วง | ระบุจำนวนคอลัมน์ที่จะข้ามองค์ประกอบ |
| คอลัมน์กว้าง | ระบุความกว้างของคอลัมน์ |
| คอลัมน์ | คอลัมน์การตั้งค่าความกว้างและคอลัมน์นับจดชวเลข |