เค้าโครงคอลัมน์หลายคอลัมน์ (เหมือนนิตยสาร) ด้วย CSS3
โดยทั่วไปผู้คนจะสูญเสียการติดตามเมื่ออ่านเนื้อหาที่ยาวมาก ด้วยเหตุนี้ในสื่อสิ่งพิมพ์เช่นนิตยสารและหนังสือพิมพ์เนื้อหาจะแบ่งออกเป็นหลายคอลัมน์เพื่อให้อ่านง่าย.
การสร้างคอลัมน์บนเว็บเป็นเรื่องราวที่แตกต่างอย่างสิ้นเชิง มันค่อนข้างยาก อันที่จริงไม่นานมานี้คุณอาจต้องแบ่งเนื้อหาออกเป็นบางส่วนด้วยตนเอง divs และลอยไปทางขวาหรือซ้ายจากนั้นระบุความกว้างการขยายระยะขอบขอบเขตและอื่น ๆ.
แต่ตอนนี้สิ่งต่าง ๆ ได้ง่ายขึ้นด้วย โมดูล CSS3 หลายคอลัมน์. เป็นชื่อที่แสดงถึงชัดเจนโมดูลนี้ช่วยให้เราสามารถแบ่งเนื้อหาออกเป็นเค้าโครงคอลัมน์ที่เราเห็นในหนังสือพิมพ์หรือนิตยสาร.
รองรับเบราว์เซอร์
ขณะนี้รองรับหลายคอลัมน์ในเบราว์เซอร์ทั้งหมด - Firefox 2+, Chrome 4+, Safari 3.1+ และ Opera 11.1 - ยกเว้นตามที่คาดการณ์ไว้ Internet Explorer แต่ IE10 รุ่นถัดไปดูเหมือนจะเริ่มให้การสนับสนุนโมดูลนี้แล้ว.
สำหรับเบราว์เซอร์ที่เหลือเพื่อให้ใช้งานได้ Firefox ยังคงต้องการ -moz- คำนำหน้าในขณะที่ Chrome และ Safari ต้องการ -WebKit- อุปสรรค Opera ไม่จำเป็นต้องมีคำนำหน้าใด ๆ ดังนั้นเราจึงสามารถใช้คุณสมบัติที่เป็นทางการได้.
ที่มา: เมื่อใดที่ฉันสามารถใช้ CSS3 หลายคอลัมน์เค้าโครง?
สร้างหลายคอลัมน์
ก่อนที่เราจะสร้างคอลัมน์เราได้เตรียมย่อหน้าข้อความบางส่วนสำหรับการสาธิตซึ่งอยู่ใน HTML5 แท็กดังนี้
Lorem ipsum dolor sit amet, consetetur adipiscing elit. ตอนนี้ฟรี, ซึ่งจะช่วยให้คุณได้รับ, และ rutrum ในเดือนสิงหาคม. ทำให้สีจางลงชั่วคราว donec volutpat fringilla porta Suspendisse ไม่ใช่ nulla tortor สินค้าโภคภัณฑ์ที่น่าสนใจหรือไม่เพียงแค่นั่งลงในรายการที่ไม่ใช่. จำนวนผู้เข้าร่วมทั้งหมดจะถูกเก็บไว้ในขณะที่คุณกำลังนั่งอยู่ในสิ่งต่อไปนี้สิ่งที่แนบมาผลรวมของพวกเขา // และอื่น ๆ
... และระบุความกว้างสำหรับ 600px จากสไตล์ชีทนั่นแหละ.
ตอนนี้เรามาเริ่มสร้างคอลัมน์กันเถอะ.
ในตัวอย่างด้านล่างเราจะแบ่งเนื้อหาออกเป็น สองคอลัมน์ กับ คอลัมน์นับ คุณสมบัติ คุณสมบัตินี้จะบอกให้เบราว์เซอร์แสดงเนื้อหาลงในคอลัมน์ตามจำนวนที่ระบุและให้เบราว์เซอร์ตัดสินความกว้างที่เหมาะสมสำหรับแต่ละคอลัมน์.
บทความ -webkit-column-count: 2; -moz คอลัมน์นับ: 2; คอลัมน์นับ: 2;
นอกเหนือจากการกำหนดโดยการนับคอลัมน์สามารถสร้างได้โดยการระบุความกว้างโดยใช้ คอลัมน์กว้าง คุณสมบัติและออกจากเบราว์เซอร์เพื่อตัดสินใจว่าควรสร้างคอลัมน์จำนวนเท่าใด.
ในตัวอย่างนี้เราระบุความกว้างคอลัมน์สำหรับ 150px, ซึ่งส่งผลให้เนื้อหาจะถูกแบ่งออกเป็นสามคอลัมน์.
บทความ -moz-column-width: 150px; -webkit-width-width: 150px; ความกว้างของคอลัมน์: 150px;
ตามที่ระบุในสเป็ค ความกว้างจริงของคอลัมน์อาจกว้างหรือแคบกว่าความกว้างคอลัมน์ที่ระบุทั้งนี้ขึ้นอยู่กับพื้นที่ว่าง นอกจากนี้หากค่าความกว้างไม่ได้ระบุไว้อย่างชัดเจน “รถยนต์” จะถูกใช้เป็นค่าเริ่มต้นซึ่งอาจหมายถึง “ไม่มีคอลัมน์”.
ช่องว่างของคอลัมน์
ช่องว่างของคอลัมน์ กำหนดช่องว่างที่แยกแต่ละคอลัมน์ สามารถระบุค่าช่องว่างได้ em หรือ px, แต่ตามที่ระบุไว้ในข้อมูลจำเพาะ ค่าต้องไม่เป็นลบ. ในตัวอย่างด้านล่างเราระบุช่องว่างสำหรับ 30px, ดังนั้นช่องว่างระหว่างคอลัมน์จึงดูกว้างขึ้นเล็กน้อย.
บทความ -webkit-column-gap: 30px; -moz-column-gap: 30px; คอลัมน์ช่องว่าง: 30px
กฎคอลัมน์
หากคุณต้องการเพิ่มเส้นขอบระหว่างคอลัมน์คุณสามารถใช้ คอลัมน์กฎ ซึ่งทำงานคล้ายกับ ชายแดน คุณสมบัติ สมมุติว่าถ้าเราต้องการใส่จุดประระหว่างคอลัมน์เราสามารถเขียน;
บทความ -moz-column-rule: 1px ประ #ccc; -webkit-column-rule: 1px ประ #ccc; คอลัมน์ - กฎ: 1px ประ #ccc;
ช่วงคอลัมน์
คุณสมบัตินี้ทำงานค่อนข้างคล้ายกับ colspan ใน ตาราง แท็ก การใช้งานทั่วไปของคุณสมบัตินี้คือการขยายพาดหัวของเนื้อหาในทุกคอลัมน์ นี่คือตัวอย่าง.
บทความ h1 -webkit-column-span: all; คอลัมน์ช่วง: ทั้งหมด;
ในตัวอย่างข้างต้นเราได้นิยาม h1 เพื่อขยายข้ามคอลัมน์ทั้งหมดและหากระบุการขยายคอลัมน์, 1 จะถูกนำมาเป็นค่าเริ่มต้น น่าเสียดายที่สถานที่ให้บริการนี้ในขณะที่เขียนนี้จะใช้งานได้เฉพาะใน Opera และ Chrome.
คำพูดสุดท้าย
ตอนนี้เรามาถึงทุกสิ่งที่จำเป็นเพื่อสร้างหลายคอลัมน์ด้วย CSS3 และตามที่เราได้กล่าวถึงในตอนแรกโมดูลนี้ทำงานได้ดีในเบราว์เซอร์ที่ทันสมัย แต่มันยังไม่ทำงานใน Internet Explorer.
ท้ายที่สุดเราหวังว่าคุณจะมีความเข้าใจที่ดีเกี่ยวกับวิธีสร้างคอลัมน์ด้วย CSS3 และหากคุณมีเวลาสำหรับการทดลองอย่าลังเลที่จะแบ่งปันวิธีการและผลลัพธ์ในช่องแสดงความคิดเห็นด้านล่าง ขอบคุณที่อ่านโพสต์นี้และขอให้สนุก.
- การสาธิต
- แหล่งดาวน์โหลด
