เค้าโครงหลายคอลัมน์ (หลายคอลัมน์)
เค้าโครงหลายคอลัมน์คือการออกแบบเนื้อหาข้อความให้เป็นเค้าโครงหลายคอลัมน์เหมือนกับหนังสือพิมพ์ กล่าวอีกนัยหนึ่ง โฟลว์น้ำตกที่เราสามารถทำได้ผ่าน js หรือ JQuery ก่อนหน้านี้สามารถทำได้โดยตรงผ่าน CSS ใน CSS3 แม้ว่าจะมีปัญหาความเข้ากันได้ก็ตาม -
ความเข้ากันได้
IE10+, FireFox16+, Chrome26+, Safari6.1+, Opera12.1
คุณสมบัติของเค้าโครงหลายคอลัมน์
CSS3 มีชุดของคุณสมบัติเพื่อใช้เค้าโครงหลายคอลัมน์ ดังแสดงในตารางต่อไปนี้:
1.columns กำหนดจำนวนคอลัมน์ของวัตถุและความกว้างของแต่ละคอลัมน์
ตั้งค่าหรือดึงข้อมูลจำนวนคอลัมน์ของวัตถุและความกว้างของแต่ละคอลัมน์
ไวยากรณ์:
columns:<'column-width'>||<'columns-count'>;
คำอธิบายพารามิเตอร์:
(1) พารามิเตอร์แรกหมายถึงความกว้างของแต่ละคอลัมน์
(2) พารามิเตอร์ที่สองหมายถึงจำนวนคอลัมน์ คุณสามารถเขียนสองหรือหนึ่งรายการ
พารามิเตอร์ทั้งสองให้ความสำคัญกับจำนวนคอลัมน์ (ในกรณีที่ลดระดับลง) หากความกว้างไม่เพียงพอ (จำนวนคอลัมน์ * ความกว้างที่ตั้งไว้ > ความกว้างของคอนเทนเนอร์) ระบบจะลดขนาดหนึ่งคอลัมน์โดยอัตโนมัติและขยายความกว้างของย่อหน้าโดยอัตโนมัติเพื่อให้ได้ความกว้างของคอนเทนเนอร์ ระยะห่างที่เหมาะสมจะถูกสร้างขึ้นโดยอัตโนมัติตรงกลาง
ตัวอย่าง:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>รูปแบบหลายคอลัมน์</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3 );}div.test1{width:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px;border:2pxsolidred;}div.tes t2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style></head><body>< div><div>จาก เดนนิส ริตชี่ ผู้ประดิษฐ์ภาษา C ในตอนแรกวางตำแหน่งสิ่งประดิษฐ์ของเขาว่าเป็นระบบ ไม่ใช่ซอฟต์แวร์กราฟิกที่ควรรวมถึงการพัฒนาไดรเวอร์ เคอร์เนลของระบบ การจัดการไฟล์ การจัดการภายใน และการสื่อสารเครือข่าย และชุดซอฟต์แวร์หลัก ดังนั้นคุณเพียงแค่ต้องเรียนรู้ไวยากรณ์ของภาษา C แต่ยังรวมถึงวิชาอื่นๆ เช่น หลักการของระบบปฏิบัติการ โปรโตคอลการสื่อสาร หลักการคอมไพเลอร์ โครงสร้างข้อมูล ฯลฯ เพื่อให้เป็นไปตามข้อกำหนดก่อนหน้านี้ </div><div>ในเวลานี้ เมื่อคุณเห็นคู่มือเมนบอร์ดเป็นภาษาอังกฤษ คุณจะรู้ว่าควรอ่านอินเทอร์เฟซใด กำหนดโปรโตคอลการสื่อสารอย่างไร ควรอ่านกี่ไบต์...และอื่นๆ ก่อน คุณสามารถเขียนได้ มีเพียงคนขับเท่านั้นที่สามารถเขียนเคอร์เนลได้ก่อนที่จะสามารถสื่อสารได้ ถึงขนาดนี้ แม้ว่าความต้องการความสามารถในองค์กรในสังคมจะสูงกว่าก็ตาม น้อยลงแต่ก็ไม่มีปัญหาในการหางานไม่ได้เลย แต่คุณเลือกงานและจ่ายเงินแทน เพราะไม่เพียงแต่คุณจะทำสิ่งเหล่านี้ได้ แต่ยังมีงานที่เกี่ยวข้องอีกมากมาย เช่น การพัฒนาไดรเวอร์ DNS ความละเอียด, การป้องกันไวรัส, ความปลอดภัยในการสื่อสาร, การจำลองเสมือน ฯลฯ มีความสามารถในการใช้เทคโนโลยีและการปรับแต่งเคอร์เนลและยังสามารถพัฒนาระบบปฏิบัติการใหม่ได้ด้วยตัวเอง </div><div>ต้องบอกว่าในสภาพแวดล้อมปัจจุบันของเรา การวางแนวการสอนภาษา C ในมหาวิทยาลัยส่วนใหญ่คือ นอกเหนือจากหลักสูตรภาษา C แล้ว วิทยาลัยบางแห่งเท่านั้นที่ควรเสนอโครงสร้างข้อมูล สถาปัตยกรรมคอมพิวเตอร์ หลักการคอมไพเลอร์ หลักสูตรต่างๆ เช่นหลักการของระบบปฏิบัติการ และบางโรงเรียนจะเก็บเฉพาะโครงสร้างข้อมูลในหลักสูตรเหล่านี้เท่านั้น หรือแม้กระทั่งไม่มีโครงสร้างข้อมูลอีกต่อไป ดังนั้น ภาษา C จึงเป็นเพียงการรู้แจ้งในการเขียนโปรแกรมเท่านั้น และเพียงพอที่จะทำความคุ้นเคยกับการคิดเชิงกระบวนการและภาษา C ก็เพียงพอแล้ว ไวยากรณ์ภาษา </div><div>ทางโรงเรียนหวังว่าหลังจากเรียนภาษา C แล้ว พวกเขาจะได้เรียนรู้ภาษา C++ หรือ Java หรือภาษาระดับสูงอื่นๆ เพื่อให้พวกเขาสามารถนำไปใช้ได้จริงมากขึ้นและหางานทำได้ง่ายขึ้น หากพวกเขามีความกระตือรือร้นมากขึ้น เพื่อความสำเร็จพวกเขาสามารถใช้ภาษา C ได้เลย ไม่ต้องเรียนอีกต่อไป แค่เรียน Java หรือ C++ หรือภาษาระดับสูงอื่นๆ ที่ไม่มีพื้นฐาน นี่คือความแตกต่างระหว่างชั้นเรียนวิชาชีพและสถาบันฝึกอบรม หากคุณไม่เรียนรู้ความรู้อย่างไร้ประโยชน์ คุณควรคิดให้มากขึ้นว่าความรู้นั้นมีประโยชน์หรือไม่ </div></div><br><div><div>ดูจากสภาพแวดล้อมโดยรวมในปัจจุบัน หากคุณกำลังเรียนวิชาเอกคอมพิวเตอร์/ซอฟต์แวร์ในวิทยาลัยที่สำคัญ คุณควรทำงานหนักกับเนื้อหาจริงเหล่านี้ ไม่ต้องเปลืองทรัพยากรการสอนของประเทศ เพราะคุณต้องรับผิดชอบต่ออนาคตของอุตสาหกรรมซอฟต์แวร์ไอทีของประเทศ หากต้องการมีส่วนร่วมใน R&D/พัฒนาซอฟต์แวร์ อย่างน้อยที่สุดคุณต้องเรียนรู้โครงสร้างข้อมูลให้ดี เพราะคุณต้องสร้าง ไม่คัดลอก วางโค้ดพอร์เตอร์ หากคุณเพียงต้องการหาเลี้ยงชีพ เพียงแค่เรียนรู้เทคนิคที่สามารถสร้างผลลัพธ์ได้ </div><div>สุดท้ายนี้ เรามาดูจุดประสงค์ทั่วไปสำหรับนักเรียนในการเรียนรู้ภาษา C ตั้งแต่วิทยาลัยระดับต้นไปจนถึงระดับปริญญาตรี การสอบเข้าระดับสูงกว่าปริญญาตรี และภาษา C ระดับที่สอง บทเรียนแบบเน้นความต้องการส่วนใหญ่จะอิงจาก คำถามเชิงทฤษฎี คำถามฝึกหัด และข้อสอบ ดังนั้นประเภทของโครงการ มีแหล่งข้อมูลภาษา C ที่ยากน้อยกว่ามาก ดังนั้นโดยธรรมชาติแล้วคุณจึงไม่ค่อยเห็นสิ่งที่เป็นกราฟิก แน่นอนว่าในฐานะผู้สนับสนุนภาษา C อย่างแข็งขัน Dotcpp จะเสริมความแข็งแกร่งให้กับทรัพยากรการเขียนโปรแกรมที่นี่ในอนาคตเพื่อให้ทุกคนได้รับการสนับสนุนทรัพยากรอย่างเพียงพอ </div><div>เมื่อเราเรียนภาษา C เนื่องจากเราเลือกโปรแกรมคอนโซล โปรแกรมของคุณจะถูกรันในหน้าต่างสีดำ หากคุณเขียนแอปพลิเคชัน Windows จะไม่มีหน้าต่างสีดำดังกล่าว และไวยากรณ์ของภาษา C ก็จะทำงาน ยังใช้ได้อยู่นะครับทุกคนก็เข้าใจได้ </div><div>หากเป็นการพัฒนากราฟิกในภาษา C ล้วนๆ ขึ้นอยู่กับขั้นตอนของคุณ คุณสามารถพิจารณาใช้ฟังก์ชันอินเทอร์เฟซกราฟิกที่รองรับโดยคอมไพเลอร์ TurBoC หรือติดตั้งไลบรารี easyX ใน VC6 เพื่อให้การพัฒนากราฟิกเสร็จสมบูรณ์ ของเกมบางเกม เช่น แบ็คแกมมอน, เตตริส, เกมพินบอล, เกมงู ฯลฯ ซึ่งเป็นเกมแบบกราฟิกและโต้ตอบได้ สำหรับเกมขั้นสูง คุณสามารถลองใช้ MFC หรือ QT ได้ </div></div></body></html>ผลการวิ่ง:
ตั้งค่าคอลัมน์ของ div.test1: 300px 4 นั่นคือความกว้างของแต่ละคอลัมน์คือ 300px และมีทั้งหมด 4 คอลัมน์ แต่คอนเทนเนอร์คือ 900px ซึ่งน้อยกว่า 1200px ดังนั้นจำนวนคอลัมน์จะเป็นแบบอัตโนมัติ ลดลงและความกว้างของคอลัมน์จะเพิ่มขึ้นอย่างเหมาะสมเพื่อแสดงในลักษณะที่เหมาะสมที่สุด อย่างไรก็ตาม div.test2 ไม่ได้ตั้งค่าความกว้างของคอนเทนเนอร์ ความกว้างของคอลัมน์ตั้งค่าเป็น 300px และจำนวนคอลัมน์ตั้งค่าไว้ที่ 4 คอลัมน์ ระบบจะจำกัดจำนวนคอลัมน์เพื่อปรับความกว้างของคอลัมน์ให้เหมาะสม
หมายเหตุ: ตั้งค่าคอลัมน์ของ div.test1: 300px 4 นั่นคือความกว้างของแต่ละคอลัมน์คือ 300px และมีทั้งหมด 4 คอลัมน์ แต่คอนเทนเนอร์คือ 900px ซึ่งน้อยกว่า 1200px ดังนั้นจำนวนคอลัมน์จะ จะลดลงโดยอัตโนมัติ และความกว้างของคอลัมน์จะเพิ่มขึ้นอย่างเหมาะสมเพื่อให้ได้วิธีการแสดงที่เหมาะสมที่สุด อย่างไรก็ตาม div.test2 ไม่ได้ตั้งค่าความกว้างของคอนเทนเนอร์ ความกว้างของคอลัมน์ตั้งค่าเป็น 300px และจำนวนคอลัมน์ตั้งค่าไว้ที่ 4 คอลัมน์ ระบบจะจำกัดจำนวนคอลัมน์เพื่อปรับความกว้างของคอลัมน์ให้เหมาะสม
2. column-width กำหนดความกว้างของคอลัมน์
ไวยากรณ์:
ความกว้างของคอลัมน์:<ความยาว>|ค่าเริ่มต้นอัตโนมัติ;
: ใช้ค่าความยาวเพื่อกำหนดความกว้างของคอลัมน์ ไม่อนุญาตให้ใช้ค่าลบ อัตโนมัติ: ปรับแต่งความกว้างตามจำนวนคอลัมน์
แม้ว่าความกว้างของคอลัมน์จะถูกตั้งค่าไว้ แต่ความกว้างจะถูกจัดสรรโดยอัตโนมัติตามจำนวนคอลัมน์และความกว้างของคอนเทนเนอร์
PS: ช่องว่างในแต่ละคอลัมน์คือ 14 พิกเซล
3. column-count กำหนดจำนวนคอลัมน์
ชุดหรือดึงข้อมูลจำนวนคอลัมน์ของวัตถุ
ไวยากรณ์:
จำนวนคอลัมน์：<จำนวนเต็ม>|อัตโนมัติ;
คำอธิบายพารามิเตอร์:: ใช้ค่าจำนวนเต็มเพื่อกำหนดจำนวนคอลัมน์ ไม่อนุญาตให้ใช้ค่าลบ อัตโนมัติ: ปรับแต่งความกว้างของการจัดสรรตามความกว้างของคอลัมน์
4. column-gap กำหนดช่องว่างระหว่างคอลัมน์
ตั้งค่าหรือดึงข้อมูลช่องว่างระหว่างคอลัมน์ของวัตถุ
ไวยากรณ์:
ช่องว่างคอลัมน์：<ความยาว>|ปกติ;
คำอธิบายพารามิเตอร์: ใช้ค่าความยาวเพื่อกำหนดช่องว่างระหว่างคอลัมน์ (ไม่ใช่ระยะห่างระหว่างคำ แต่ระยะห่างระหว่างย่อหน้า) ไม่อนุญาตให้ใช้ค่าลบ ปกติ: เหมือนกับขนาดตัวอักษร ระยะห่าง ปกติ ขึ้นอยู่กับขนาดตัวอักษร เช่นเดียวกับขนาดตัวอักษร
ตัวอย่าง:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>รูปแบบหลายคอลัมน์</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{ เส้นขอบ:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{สีพื้นหลัง:rgb(0,0,0,.3);ระยะขอบด้านบน: 20px;}ดิ v.test1{width:900px;columns:300px4;font-size:14px;}div.test2{คอลัมน์:400px;font-size:30px;}div.test3{จำนวนคอลัมน์:4;column- gap:14px;}</style></head><body><h3>แบบอักษร: 14px ไม่มีการตั้งค่าช่องว่าง: ค่าเริ่มต้นเหมือนกับแบบอักษร 14px;</h3><div><div>เพื่อนหลายคน ที่เคยเรียนภาษา C เมื่อมองย้อนกลับไปที่ภาษา C คุณจะมีคำถามนี้อย่างแน่นอน: ทำไมภาษา C ถึงทำงานในหน้าต่างสีดำ? โปรแกรมที่คำนวณพื้นที่ของสามเหลี่ยมหรือพิมพ์จำนวนดอกแดฟโฟดิล? ไม่ว่าการเขียนโปรแกรมจะยอดเยี่ยมแค่ไหน ทำไมเราถึงยังทำซอฟต์แวร์เจ๋งๆ เหล่านั้นไม่ได้ สุดท้ายแล้ว มันก็ยังเป็นเด็กอยู่! ทำไม. </div><div>ประการแรก การวางตำแหน่งของการประดิษฐ์ภาษา C จากจุดเริ่มต้นของการประดิษฐ์โดย Dennis Ritchie ผู้ประดิษฐ์ภาษา C เรารู้ว่ามันจะเป็นระบบ ไม่ใช่ซอฟต์แวร์กราฟิกเอง มันควรจะเป็น โดยจะรวมชุดงานหลักต่างๆ เช่น การพัฒนาไดรเวอร์ การสร้างเคอร์เนลของระบบ การจัดการไฟล์ การจัดการภายใน การสื่อสารเครือข่าย เป็นต้น </div><div>ประการที่สอง ตำแหน่งการสอนทั่วไปในประเทศจีน ต้องบอกว่าในสภาพแวดล้อมปัจจุบันของเรา ตำแหน่งการสอนของมหาวิทยาลัยส่วนใหญ่สำหรับภาษา C คือ มีเพียงวิทยาลัยบางแห่งเท่านั้นที่ควรเสนอโครงสร้างข้อมูลนอกเหนือจากหลักสูตรภาษา C สถาปัตยกรรมคอมพิวเตอร์ หลักการคอมไพเลอร์ หลักการระบบปฏิบัติการ และรายวิชาอื่นๆ </div><div>นอกจากนี้ คณะกรรมการตรวจสอบวินัยและการกำกับดูแลเทศมณฑลหว่านได้ตรวจสอบการปฏิบัติหน้าที่ของหน่วยงานและบุคลากรที่เกี่ยวข้อง เช่น สำนักงานการศึกษาและกีฬาของเทศมณฑล ตลาดเทศมณฑลและการบริหารการควบคุมคุณภาพ และ รัฐบาลเมือง Jiantian และทบทวนการกำกับดูแลผู้รับผิดชอบของสำนักงานการศึกษาและการกีฬาของมณฑล, ตลาดของมณฑลและการบริหารการควบคุมคุณภาพ, สำนักเกษตรกรรมของมณฑล, คณะกรรมการสุขภาพและครอบครัวของเทศมณฑล, รัฐบาลเมือง Jiantian และหน่วยงานอื่น ๆ ที่เกี่ยวข้องซึ่ง ล้มเหลวในการทำงานจึงได้แยกฟ้องและพิจารณาคดีแล้ว ในเวลาเดียวกัน คณะกรรมาธิการเคาน์ตีเพื่อตรวจสอบวินัยและการกำกับดูแลจะดำเนินการสอบสวนกระบวนการประมูลอาหารโภชนาการของนักเรียน และจะประกาศผลต่อสาธารณะทันทีที่พร้อมให้บริการ </div></div><br><h3>แบบอักษร: 30px ไม่มีการตั้งค่าช่องว่าง: ค่าเริ่มต้นคือ 30px เช่นเดียวกับแบบอักษร;</h3><div><div>เพื่อนหลายคนที่เคยเรียนภาษา C กำลังมองย้อนกลับไปที่ C เมื่อพูดถึงภาษาจะมีคำถามเช่นนี้อย่างแน่นอน: ทำไมภาษา C ถึงทำงานภายใต้หน้าต่างสีดำ? โปรแกรมที่คำนวณพื้นที่ของสามเหลี่ยมหรือพิมพ์จำนวนดอกแดฟโฟดิล? ไม่ว่าการเขียนโปรแกรมจะยอดเยี่ยมแค่ไหน ทำไมเราถึงยังทำซอฟต์แวร์เจ๋งๆ เหล่านั้นไม่ได้ สุดท้ายแล้ว มันก็ยังเป็นเด็กอยู่! ทำไม. </div><div>ประการแรก การวางตำแหน่งของการประดิษฐ์ภาษา C จากจุดเริ่มต้นของการประดิษฐ์โดย Dennis Ritchie ผู้ประดิษฐ์ภาษา C เรารู้ว่ามันจะเป็นระบบ ไม่ใช่ซอฟต์แวร์กราฟิกเอง มันควรจะเป็น โดยจะรวมชุดงานหลักต่างๆ เช่น การพัฒนาไดรเวอร์ การสร้างเคอร์เนลของระบบ การจัดการไฟล์ การจัดการภายใน การสื่อสารเครือข่าย เป็นต้น </div><div>ประการที่สอง ตำแหน่งการสอนทั่วไปในประเทศจีน ต้องบอกว่าในสภาพแวดล้อมปัจจุบันของเรา ตำแหน่งการสอนของมหาวิทยาลัยส่วนใหญ่สำหรับภาษา C คือ มีเพียงวิทยาลัยบางแห่งเท่านั้นที่ควรเสนอโครงสร้างข้อมูลนอกเหนือจากหลักสูตรภาษา C สถาปัตยกรรมคอมพิวเตอร์ หลักการคอมไพเลอร์ หลักการระบบปฏิบัติการ และรายวิชาอื่นๆ </div><div>ประการที่สาม สามารถใช้ภาษา C ได้ แต่ไม่ค่อยทำในภาษา C โดยตรง เมื่อเราเรียนภาษา C เราจะเลือกโปรแกรมคอนโซล ดังนั้นโปรแกรมของคุณจะทำงานในหน้าต่างสีดำ เขียนโปรแกรม windows จะไม่มีหน้าต่างสีดำดังกล่าว แต่จะยังคงเป็น syntax ของภาษา C ซึ่งทุกคนสามารถเข้าใจได้ </div></div><br><h3>แบบอักษร: 30px การตั้งค่าช่องว่าง: 14px;</h3><div><div>เพื่อนหลายคนที่เคยเรียนภาษา C จะรู้อย่างแน่นอนเมื่อมองย้อนกลับไปที่ภาษา C ฉันมีคำถามนี้ ทำไมภาษา C ถึงทำงานภายใต้หน้าต่างสีดำ? โปรแกรมที่คำนวณพื้นที่ของสามเหลี่ยมหรือพิมพ์จำนวนดอกแดฟโฟดิล? ไม่ว่าการเขียนโปรแกรมจะยอดเยี่ยมแค่ไหน ทำไมเราถึงยังทำซอฟต์แวร์เจ๋งๆ เหล่านั้นไม่ได้ สุดท้ายแล้ว มันก็ยังเป็นเด็กอยู่! ทำไม. </div><div>ประการแรก การวางตำแหน่งของการประดิษฐ์ภาษา C จากจุดเริ่มต้นของการประดิษฐ์โดย Dennis Ritchie ผู้ประดิษฐ์ภาษา C เรารู้ว่ามันจะเป็นระบบ ไม่ใช่ซอฟต์แวร์กราฟิกเอง มันควรจะเป็น โดยจะรวมชุดงานหลักต่างๆ เช่น การพัฒนาไดรเวอร์ การสร้างเคอร์เนลของระบบ การจัดการไฟล์ การจัดการภายใน การสื่อสารเครือข่าย เป็นต้น </div><div>ประการที่สอง ตำแหน่งการสอนทั่วไปในประเทศจีน ต้องบอกว่าในสภาพแวดล้อมปัจจุบันของเรา ตำแหน่งการสอนของมหาวิทยาลัยส่วนใหญ่สำหรับภาษา C คือ มีเพียงวิทยาลัยบางแห่งเท่านั้นที่ควรเสนอโครงสร้างข้อมูลนอกเหนือจากหลักสูตรภาษา C สถาปัตยกรรมคอมพิวเตอร์ หลักการคอมไพเลอร์ หลักการระบบปฏิบัติการ และรายวิชาอื่นๆ </div><div>ประการที่สาม สามารถใช้ภาษา C ได้ แต่ไม่ค่อยทำในภาษา C โดยตรง เมื่อเราเรียนภาษา C เราจะเลือกโปรแกรมคอนโซล ดังนั้นโปรแกรมของคุณจะทำงานในหน้าต่างสีดำ เขียนโปรแกรม windows จะไม่มีหน้าต่างสีดำดังกล่าว แต่จะยังคงเป็น syntax ของภาษา C ซึ่งทุกคนสามารถเข้าใจได้ </div></div></body></html>ผลการวิ่ง:
5. column-rule กำหนดเส้นขอบระหว่างคอลัมน์
ไวยากรณ์:
คอลัมน์กฎ:<คอลัมน์กฎความกว้าง>||<คอลัมน์กฎสไตล์>||<คอลัมน์กฎสี>
คำอธิบายพารามิเตอร์
● คอลัมน์กฎความกว้าง ความหนาของเส้นขอบ
●รูปแบบเส้นขอบสไตล์คอลัมน์กฎ
●สีเส้นขอบคอลัมน์-กฎ-สี
PS: ให้ความสนใจเป็นพิเศษว่าหากช่องว่างระหว่างคอลัมน์ < ความกว้างของเส้นขอบ จะมีสถานการณ์ที่คอลัมน์ครอบคลุมเส้นขอบ
(1) ความกว้างของคอลัมน์กฎ
ตั้งค่าหรือดึงข้อมูลความหนาของเส้นขอบระหว่างคอลัมน์ของวัตถุ
ไวยากรณ์:
คอลัมน์กฎความกว้าง：<ความยาว>|บาง|ปานกลาง|หนา;
คำอธิบายพารามิเตอร์
●ความยาว: ใช้ค่าความยาวเพื่อกำหนดความหนาของเส้นขอบ ไม่อนุญาตให้ใช้ค่าลบ
●ปานกลาง: กำหนดความหนาเริ่มต้นของเส้นขอบ
●thin: กำหนดเส้นขอบที่บางกว่าความหนาเริ่มต้น
●หนา: กำหนดเส้นขอบให้หนากว่าความหนาเริ่มต้น
(2) column-rule-style กำหนดรูปแบบของเส้นขอบ
ตั้งค่าหรือดึงข้อมูลลักษณะเส้นขอบระหว่างคอลัมน์ของวัตถุ
ไวยากรณ์
รูปแบบกฎคอลัมน์: ไม่มี|ซ่อน|จุด|ประ|ทึบ|คู่|ร่อง|สัน|สิ่งที่ใส่เข้าไป|เริ่มต้น;
คำอธิบายพารามิเตอร์
●ไม่มี: ไม่มีโครงร่าง;
●ซ่อน: ซ่อนเส้นขอบ;
●เส้นประ: เส้นประ;
●เส้นประ: เส้นประ;
●ทึบ: โครงร่างทึบ;
●คู่: โครงร่างเส้นคู่;
●ร่อง: โปรไฟล์ร่อง 3D;
●สัน: โปรไฟล์ร่องนูน 3 มิติ;
●สิ่งที่ใส่เข้าไป: รูปร่างขอบเว้า 3 มิติ;
●เริ่มต้น: โครงร่างขอบนูน 3 มิติ
หมายเหตุ: หากมีเค้าร่างที่มีเส้นสองเส้น ความกว้างจะรวมระยะห่างระหว่างเส้นทั้งสองด้วย
(3) column-rule-color กำหนดสีเส้นขอบ
ตั้งค่าหรือดึงข้อมูลสีเส้นขอบระหว่างคอลัมน์ของวัตถุ
ไวยากรณ์:
คอลัมน์กฎสี:<สี>;
คำอธิบายพารามิเตอร์: ระบุสี หากไม่มีความกว้างและสไตล์ สีก็จะล้มเหลว สีดำเริ่มต้น
6. column-span ตั้งค่าองค์ประกอบให้ขยายคอลัมน์ทั้งหมด
ตั้งค่าหรือดึงข้อมูลว่าองค์ประกอบวัตถุครอบคลุมคอลัมน์ทั้งหมดหรือไม่
ไวยากรณ์:
คอลัมน์ช่วง: ไม่มี | ทั้งหมด;
คำอธิบายพารามิเตอร์: ไม่มี: ไม่ขยายคอลัมน์ ทั้งหมด: ขยายคอลัมน์ทั้งหมด
มันไม่ได้ใช้ในคอนเทนเนอร์เหมือนแอตทริบิวต์คอลัมน์อื่นๆ แต่ใช้ในองค์ประกอบย่อยของคอนเทนเนอร์
7. การเติมคอลัมน์กำหนดความสูงของคอลัมน์ให้เป็นหนึ่งเดียว (ปัจจุบันเข้ากันไม่ได้กับเบราว์เซอร์กระแสหลัก)
ตั้งค่าหรือดึงข้อมูลว่าความสูงของคอลัมน์ทั้งหมดของวัตถุมีความสม่ำเสมอหรือไม่
ไวยากรณ์:
คอลัมน์เติม: ค่าเริ่มต้นอัตโนมัติ | ยอดคงเหลือ;
คำอธิบายพารามิเตอร์: อัตโนมัติ: เนื้อหาที่ปรับเปลี่ยนความสูงของคอลัมน์ สมดุล: ความสูงของคอลัมน์ทั้งหมดจะรวมกับคอลัมน์สูงสุด
เบราว์เซอร์หลักเข้ากันไม่ได้กับคุณลักษณะนี้
8. ตัวแบ่งคอลัมน์ตั้งค่าการขึ้นบรรทัดใหม่
●column-break-before กำหนดว่าจะแบ่งบรรทัดก่อนวัตถุที่ระบุหรือไม่
●column-break-after กำหนดว่าจะแบ่งบรรทัดหลังวัตถุที่ระบุหรือไม่
●column-break-inside กำหนดว่าจะแบ่งบรรทัดภายในวัตถุหรือไม่
(1) แบ่งคอลัมน์ก่อน
ไม่ว่าจะแบ่งบรรทัดก่อนตั้งค่าหรือดึงวัตถุ
ไวยากรณ์:
แบ่งคอลัมน์ก่อน: อัตโนมัติ | เสมอ | หลีกเลี่ยง;
คำอธิบายพารามิเตอร์: อัตโนมัติ: ไม่บังคับหรือห้ามไม่ให้มีการแบ่งบรรทัดก่อนองค์ประกอบและสร้างคอลัมน์ใหม่ เสมอ: หลีกเลี่ยงการแบ่งบรรทัดก่อนองค์ประกอบและสร้างคอลัมน์ใหม่
(2) การแบ่งคอลัมน์หลัง
ไม่ว่าจะแบ่งบรรทัดหลังจากตั้งค่าหรือดึงวัตถุ
ไวยากรณ์:
แบ่งคอลัมน์หลัง：อัตโนมัติ|เสมอ|หลีกเลี่ยง;
คำอธิบายพารามิเตอร์: อัตโนมัติ: ไม่บังคับหรือห้ามไม่ให้แยกบรรทัดหลังองค์ประกอบและสร้างคอลัมน์ใหม่ เสมอ: หลีกเลี่ยงบรรทัดหลังองค์ประกอบและสร้างคอลัมน์ใหม่เสมอ
(3) คุณลักษณะการแบ่งคอลัมน์ภายใน
ตั้งค่าหรือดึงข้อมูลว่าเส้นขาดภายในวัตถุหรือไม่
ไวยากรณ์:
คอลัมน์แบ่งภายใน: autodefault | หลีกเลี่ยง