คุณสมบัติ พังเข้าไปข้างในกำหนดวิธีการวางตัวแบ่งหน้าและคอลัมน์ภายในองค์ประกอบปัจจุบัน ตามค่าเริ่มต้น ตัวแบ่งหน้าหรือคอลัมน์จะถูกตั้งค่าโดยอัตโนมัติและไม่ได้สืบทอดมาจากองค์ประกอบหลัก ค่าหน้าหลีกเลี่ยงจะใช้เฉพาะเมื่อจัดรูปแบบเอกสารที่มีหน้า เช่น เมื่อพิมพ์ และจะถูกละเว้นสำหรับมุมมองที่ไม่แยก เช่น เมื่อแสดงในเบราว์เซอร์ ค่าหลีกเลี่ยงคอลัมน์ใช้สำหรับข้อความหลายคอลัมน์
ค่าที่ถูกต้อง
- CSS2 CSS3 อัตโนมัติ- ตัวแบ่งหน้าหรือคอลัมน์อัตโนมัติก่อนองค์ประกอบปัจจุบัน (ค่าเริ่มต้น)
- CSS2 CSS3 หลีกเลี่ยง
- CSS3 หลีกเลี่ยงหน้า- ยกเลิกการแบ่งหน้าภายในองค์ประกอบปัจจุบัน
- CSS3 หลีกเลี่ยงคอลัมน์- ยกเลิกการแบ่งคอลัมน์ภายในองค์ประกอบปัจจุบัน
ตัวอย่างการใช้งาน
พังภายใน: อัตโนมัติ; - กระจายสม่ำเสมอ
การกระจายเนื้อหาระหว่างคอลัมน์อย่างสม่ำเสมอ โดยตัวแบ่งจะถูกวางโดยอัตโนมัติในตำแหน่งที่เหมาะสมที่สุดภายในหรือระหว่างองค์ประกอบใดๆ ด้วยการกระจายแบบสม่ำเสมอ ความสูงของคอลัมน์จะเท่ากันโดยประมาณโดยมีความหนาแน่นของข้อความสม่ำเสมอไม่มากก็น้อย
รูปแบบ ( จำนวนคอลัมน์: 3; ช่องว่างคอลัมน์: 2em; กฎคอลัมน์: 1px solid #666; )
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
พังภายใน: หลีกเลี่ยงคอลัมน์; - ยกเลิกการแบ่งคอลัมน์
สไตล์ ( จำนวนคอลัมน์: 3; ช่องว่างคอลัมน์: 2em; กฎคอลัมน์: 1px solid #666; ) .style div ( แบ่งภายใน: หลีกเลี่ยงคอลัมน์; )
บล็อกที่ 1ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
บล็อกที่ 2ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
บล็อกที่ 3ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ
คุณสมบัติการแบ่งภายในถูกกำหนดไว้ในข้อกำหนดโมดูลเค้าโครงหลายคอลัมน์ CSS 3 ใช้กับองค์ประกอบบล็อก และใช้ได้กับสื่อเพจทั้งหมด ค่าของคุณสมบัติไม่ได้รับการสืบทอดจากองค์ประกอบหลักในลำดับชั้นของเอกสาร และมีค่าเริ่มต้นเป็นอัตโนมัติ ขณะนี้คุณสมบัติได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมด
ดูสิ่งนี้ด้วย:
- การแบ่งหลัง - กฎสำหรับการตั้งค่าคอลัมน์หรือตัวแบ่งหน้าหลังองค์ประกอบ
- break-before - กฎสำหรับการตั้งค่าคอลัมน์หรือตัวแบ่งหน้าก่อนองค์ประกอบ
- -webkit-column-break-after - กฎสำหรับการตั้งค่าตัวแบ่งคอลัมน์หลังองค์ประกอบ
- -webkit-column-break-before - กฎสำหรับการตั้งค่าตัวแบ่งคอลัมน์ก่อนองค์ประกอบ
- -webkit-column-break-inside - กฎสำหรับการตั้งค่าการแบ่งคอลัมน์ภายในองค์ประกอบ
โมดูล คอลัมน์ CSS3อธิบายเค้าโครงแบบหลายคอลัมน์ที่ช่วยให้เนื้อหาสามารถจัดระเบียบให้ครอบคลุมคอนเทนเนอร์แนวตั้งหลายรายการ คล้ายกับหนังสือพิมพ์หรือนิตยสาร คอลัมน์สามารถประกอบด้วยส่วนหัว ข้อความ ตาราง รูปภาพ และองค์ประกอบแบบอินไลน์อื่นๆ
แบบจำลองหลายคอลัมน์
รองรับเบราว์เซอร์
เช่น: 10
ขอบ: 12
ไฟร์ฟอกซ์: 52, 2-มอ
โครเมียม: 50, 4 -เว็บคิท-
ซาฟารี: 9, 3.1 -เว็บคิท-
โอเปร่า: 37, 11.5 -เว็บคิท-
iOS ซาฟารี: 9, 3.2 -เว็บคิท-
เบราว์เซอร์ UC สำหรับ Android: 11.8
โครมสำหรับแอนดรอยด์: 73
ซัมซุงอินเทอร์เน็ต: 5, 4 -เว็บคิท-
โพสเก่าครับ
24 พฤศจิกายน 2555
15 เมืองเล็ก ๆ ที่มีเสน่ห์ที่สุดในอังกฤษ
1. เบอร์วิค-อัพ-ออน-ทวีด
เบอร์วิคก่อตั้งขึ้นในฐานะนิคมแองโกล-แซกซันในสมัยอาณาจักรนอร์ธัมเบรีย ซึ่งถูกอังกฤษผนวกในศตวรรษที่ 10 พื้นที่นี้เป็นศูนย์กลางของสงครามชายแดนประวัติศาสตร์ระหว่างราชอาณาจักรอังกฤษและสกอตแลนด์มานานกว่า 400 ปี และการครอบครอง Berwick หลายครั้งได้เปลี่ยนมือระหว่างสองอาณาจักร ครั้งสุดท้ายที่เปลี่ยนมือคือเมื่อ Richard of Gloucester ยึดกลับอังกฤษในปี 1482 จนถึงทุกวันนี้ Berwickers หลายคนรู้สึกถึงความสัมพันธ์ใกล้ชิดกับสกอตแลนด์
ทุกวันนี้ เบอร์วิค-อัพพอน-ทวีดมีผู้มาเยี่ยมชมมากเนื่องจากมีประวัติศาสตร์ที่มองเห็นได้ชัดเจน เช่น กำแพงเมืองในยุคกลาง กำแพงเมืองอลิซาเบธ ซากปรักหักพังของปราสาทในศตวรรษที่ 13 'สะพานเก่า' ในศตวรรษที่ 17 ศาลากลาง ค่ายทหารที่เก่าแก่ที่สุดของอังกฤษ โรงแรมที่อยู่เหนือสุดของอังกฤษ และอื่นๆ อีกมากมาย .
2.ไรย์
Ancient Rye เป็นถนนที่ปูด้วยหินและบ้านเรือนที่พังทลายลงริมทะเล เดิมทีเป็นส่วนหนึ่งของ Cinque Ports Confederation ซึ่งเป็นเมืองยุทธศาสตร์ 5 แห่งที่มีความสำคัญต่อการค้าและการทหารในยุคกลาง ปัจจุบัน Rye กลายเป็นพิพิธภัณฑ์ที่มีชีวิต ปราสาทไรย์หรือที่รู้จักกันในชื่ออีเปอร์ทาวเวอร์ สร้างขึ้นในปี 1249 โดยพระเจ้าเฮนรีที่ 3 เพื่อป้องกันการโจมตีจากฝรั่งเศสบ่อยครั้ง ยิ่งแก่กว่านั้นคือนักบุญในยุคนอร์มัน โบสถ์แมรี่มองออกไปทั่วเมือง Rye ยังอยู่ห่างจาก Camber Sands ซึ่งเป็นชายหาดที่มีชื่อเสียงที่สุดแห่งหนึ่งของอังกฤษเพียงไม่กี่นาที สนามเด็กเล่นยาว 2 ไมล์สำหรับนักเล่นไคท์เซิร์ฟและคนรักชายหาด
รูปที่ 1. ตัวอย่างโครงร่างแบบหลายคอลัมน์
1. จำนวนและความกว้างของคอลัมน์
การกำหนดจำนวนและความกว้างของคอลัมน์เป็นพื้นฐานเมื่อสร้างเค้าโครงแบบหลายคอลัมน์ คุณสมบัติการนับคอลัมน์และความกว้างคอลัมน์ใช้เพื่อกำหนดจำนวนและความกว้างของคอลัมน์
คุณสมบัติที่สาม คอลัมน์ เป็นคุณสมบัติชวเลขที่กำหนดความกว้างและจำนวนคอลัมน์ในเวลาเดียวกัน
ปัจจัยอื่นๆ เช่น ตัวแบ่งคอลัมน์อย่างชัดเจน เนื้อหา และข้อจำกัดด้านความสูงอาจส่งผลต่อจำนวนและความกว้างของคอลัมน์จริง
1.1. ความกว้างของคอลัมน์: คุณสมบัติความกว้างของคอลัมน์
คุณสมบัติความกว้างของคอลัมน์ระบุความกว้างขั้นต่ำที่แต่ละคอลัมน์ควรใช้
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
ความกว้างของคอลัมน์: อัตโนมัติ; ความกว้างของคอลัมน์: 100px ความกว้างของคอลัมน์: 10em ความกว้างของคอลัมน์: 3.3vw; ความกว้างของคอลัมน์: สืบทอด; ความกว้างของคอลัมน์: เริ่มต้น;
1.2. จำนวนคอลัมน์: คุณสมบัติการนับคอลัมน์
คุณสมบัติการนับคอลัมน์อธิบายจำนวนคอลัมน์ และความกว้างจะถูกคำนวณตามความกว้างของพื้นที่ว่าง หากระบุความกว้างของคอลัมน์พร้อมกับจำนวนคอลัมน์ ค่าของจำนวนคอลัมน์จะถือเป็นจำนวนคอลัมน์สูงสุด
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
จำนวนคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: 2; จำนวนคอลัมน์: สืบทอด; จำนวนคอลัมน์: เริ่มต้น;
1.3. การตั้งค่าคอลัมน์ด้วยคุณสมบัติคอลัมน์เดียว
คุณสมบัติคอลัมน์เป็นคุณสมบัติชวเลขสำหรับการตั้งค่าความกว้างของคอลัมน์และจำนวนคอลัมน์ ค่าที่ละเว้นจะถูกตั้งค่าเป็นค่าเริ่มต้น
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
คอลัมน์: 12em; /* ความกว้างของคอลัมน์: 12em; จำนวนคอลัมน์: auto */ คอลัมน์: auto 12em; /* ความกว้างของคอลัมน์: 12em; จำนวนคอลัมน์: auto */ คอลัมน์: 2; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: 2 */ คอลัมน์: 2 อัตโนมัติ; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: 2 */ คอลัมน์: อัตโนมัติ; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: auto */ คอลัมน์: auto auto; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: auto */ คอลัมน์: สืบทอด; คอลัมน์: เริ่มต้น;
2. ระยะห่างของคอลัมน์และเส้นแบ่ง
ระยะห่างคอลัมน์และเส้นคั่นจะถูกวางไว้ระหว่างคอลัมน์ในคอนเทนเนอร์หลายคอลัมน์เดียว ความยาวของช่องว่างและตัวคั่นเท่ากับความสูงของคอลัมน์ ช่องว่างของคอลัมน์ใช้พื้นที่ กล่าวคือ ช่องว่างจะแยกเนื้อหาในคอลัมน์ที่อยู่ติดกัน
เส้นแบ่งจะลากไว้ตรงกลางช่องว่างระหว่างคอลัมน์โดยไม่กินพื้นที่ นั่นคือการมีอยู่หรือความหนาของเส้นแบ่งจะไม่เปลี่ยนตำแหน่งของสิ่งอื่นใด
เส้นจะเต็มเหนือเส้นขอบขององค์ประกอบหลายคอลัมน์ หากองค์ประกอบมีพื้นที่เลื่อน เส้นคั่นจะเลื่อนไปตามคอลัมน์ เส้นแยกจะแสดงระหว่างสองคอลัมน์ที่มีเนื้อหาเท่านั้น
2.1. ช่องว่างระหว่างคอลัมน์: คุณสมบัติคอลัมน์ช่องว่าง
คุณสมบัติ column-gap กำหนดช่องว่างระหว่างคอลัมน์ หากคอลัมน์มีเส้นคั่นที่ตั้งค่าโดยใช้คุณสมบัติกฎคอลัมน์ เส้นนี้จะอยู่ที่กึ่งกลางของช่องว่าง และความกว้างจะไม่เปลี่ยนความกว้างโดยรวม
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
ช่องว่างระหว่างคอลัมน์: ปกติ; ช่องว่างคอลัมน์: 3px; ช่องว่างคอลัมน์: 2.5em; ช่องว่างของคอลัมน์: 3% ช่องว่างคอลัมน์: สืบทอด; ช่องว่างคอลัมน์: เริ่มต้น;
2.2. สีของเส้นคั่น: คุณสมบัติคอลัมน์-กฎ-สี
คุณสมบัติ column-rule-color ระบุสีของเส้นคั่น
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
คอลัมน์กฎสี: สีชมพู; คอลัมน์กฎสี: #D71C3B; คอลัมน์กฎสี: rgb (192, 56, 78); คอลัมน์กฎสี: โปร่งใส; คอลัมน์กฎสี: hsla (0, 100%, 50%, 0.6); คอลัมน์กฎสี: สืบทอด; คอลัมน์กฎสี: เริ่มต้น;
2.3. รูปแบบเส้นคั่น: คุณสมบัติรูปแบบกฎคอลัมน์
คุณสมบัติ column-rule-style กำหนดรูปแบบของเส้นคั่น
ทรัพย์สินไม่ได้รับมรดก
| คอลัมน์กฎสไตล์ | |
|---|---|
| ค่า: | |
| ไม่มี | ค่าประเมินเป็น 0 ค่าเริ่มต้น |
| ที่ซ่อนอยู่ | ในทำนองเดียวกันด้วยค่า none เส้นจะถูกซ่อนไว้ |
| จุด | แสดงเส้นเป็นชุดของจุดสี่เหลี่ยม |
| ประ | แสดงเส้นเป็นชุดของขีดกลาง |
| แข็ง | เส้นปกติ. |
| สองเท่า | แสดงเส้นแบ่งเป็นเส้นบางๆ สองเส้นขนานกันโดยเว้นระยะห่างจากกัน ไม่ได้ระบุความกว้างของเส้นคั่น แต่ผลรวมของเส้นและระยะห่างระหว่างเส้นทั้งสองจะเท่ากับค่าของ column-rule-width |
| ร่อง | แสดงเส้น 3 มิติที่กดลงบนผืนผ้าใบ ซึ่งทำได้โดยการสร้างเงาที่มีสองสี สีหนึ่งเข้มกว่าและสีอ่อนกว่าหนึ่งสี |
| สันเขา | แสดงเส้นแบ่งระดับเสียง เช่น ผลตรงกันข้ามของร่อง |
| สิ่งที่ใส่เข้าไป | แสดงเส้นทึบที่เข้มกว่าสีของเส้นที่ระบุ |
| เริ่มแรก | แสดงเส้นทึบในสีที่ระบุโดยคุณสมบัติ column-rule-color |
| อักษรย่อ | ตั้งค่าของคุณสมบัติให้เป็นค่าเริ่มต้น |
| สืบทอด | สืบทอดค่าคุณสมบัติจากองค์ประกอบหลัก |
ไวยากรณ์
รูปแบบกฎคอลัมน์: ไม่มี; คอลัมน์กฎสไตล์: ซ่อน; คอลัมน์กฎสไตล์: จุด; คอลัมน์กฎสไตล์: ประ; คอลัมน์กฎสไตล์: ของแข็ง; คอลัมน์กฎสไตล์: double; คอลัมน์กฎสไตล์: ร่อง; คอลัมน์กฎสไตล์: สันเขา; คอลัมน์กฎสไตล์: สิ่งที่ใส่เข้าไป; คอลัมน์กฎสไตล์: เริ่มต้น; คอลัมน์กฎสไตล์: สืบทอด; คอลัมน์กฎสไตล์: เริ่มต้น;
2.4. ความกว้างของเส้นคั่น: คุณสมบัติคอลัมน์กฎความกว้าง
คุณสมบัติ column-rule-width กำหนดความกว้างของเส้นคั่น ไม่อนุญาตให้ใช้ค่าลบ ใช้งานไม่ได้หากไม่มีคุณสมบัติ column-rule-style
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
คอลัมน์กฎความกว้าง: บาง; คอลัมน์กฎความกว้าง: ปานกลาง; คอลัมน์กฎความกว้าง: หนา; คอลัมน์กฎความกว้าง: 1px; ความกว้างของคอลัมน์กฎ: 2.5em คอลัมน์กฎความกว้าง: สืบทอด; ความกว้างของกฎคอลัมน์: เริ่มต้น;
2.5. การจดชวเลขคุณสมบัติเส้นคั่น: คุณสมบัติกฎคอลัมน์
คุณสมบัติ column-rule เป็นการจดชวเลขสำหรับคุณสมบัติ column-rule-width column-rule-style column-rule-color
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
กฎคอลัมน์: จุด; กฎคอลัมน์: ทึบ 8px; คอลัมน์กฎ: สีน้ำเงินทึบ; คอลัมน์กฎ: สีฟ้าแทรกหนา; คอลัมน์กฎ: สืบทอด; คอลัมน์กฎ: เริ่มต้น;
3. ตัวแบ่งคอลัมน์
เมื่อเนื้อหาถูกวางในหลายคอลัมน์ เบราว์เซอร์จะต้องกำหนดตำแหน่งที่จะวางตัวแบ่งคอลัมน์ ปัญหาของการแบ่งเนื้อหาออกเป็นคอลัมน์จะคล้ายกับการแยกเนื้อหาออกเป็นหน้าๆ เพื่อแก้ไขปัญหานี้ จึงได้มีการแนะนำคุณสมบัติใหม่สามประการที่อนุญาตให้มีการอธิบายตัวแบ่งคอลัมน์ในคุณสมบัติเดียวกับตัวแบ่งหน้า: break-before , break-after และ break-inside
4. ช่วงคอลัมน์: คุณสมบัติช่วงคอลัมน์
คุณสมบัติ column-span อนุญาตให้องค์ประกอบขยายหลายคอลัมน์ ไม่ได้ระบุไว้สำหรับบล็อกคอนเทนเนอร์ แต่สำหรับองค์ประกอบเฉพาะภายใน เช่น สำหรับส่วนหัว
ในอนาคต คุณจะสามารถระบุจำนวนคอลัมน์ที่จะขยายได้ คล้ายกับแอตทริบิวต์ colspan ที่สามารถนำไปใช้กับเซลล์ตารางได้ แต่ในข้อกำหนด CSS3 มีเพียงสองค่าที่เป็นไปได้เท่านั้น: none และ all
คุณสมบัติไม่ทำงานตามค่าเริ่มต้นใน Firefox ผู้ใช้จะต้องเปิดใช้งานคุณลักษณะอย่างชัดเจน โดยต้องตั้งค่าlayout.css.column-span.enabledเป็น true หากต้องการเปลี่ยนการตั้งค่าใน Firefox ให้ไปที่ about:config
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
ช่วงคอลัมน์: ไม่มี คอลัมน์ช่วง: ทั้งหมด; คอลัมน์ช่วง: สืบทอด; คอลัมน์ช่วง: เริ่มต้น;
5. การเติมคอลัมน์ด้วยเนื้อหา: คุณสมบัติการเติมคอลัมน์
คุณสมบัติการเติมคอลัมน์จะควบคุมวิธีการเติมเนื้อหาในคอลัมน์ มีสองกลยุทธ์ในการเติมคอลัมน์: คอลัมน์สามารถจัดแนวความสูงได้หรือไม่ หากมีการจัดแนวคอลัมน์ เบราว์เซอร์ควรพยายามลดการเปลี่ยนแปลงความสูงของคอลัมน์ให้เหลือน้อยที่สุด โดยคำนึงถึงการบังคับแบ่ง ม่าย เด็กกำพร้า และคุณสมบัติอื่นๆ ที่อาจส่งผลต่อความสูงของคอลัมน์ หากคอลัมน์ไม่ตรงกัน คอลัมน์เหล่านั้นจะถูกเติมตามลำดับ บางคอลัมน์อาจเติมบางส่วนหรือไม่มีการเติมเลย
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
เติมคอลัมน์: อัตโนมัติ; คอลัมน์เติม: สมดุล; เติมคอลัมน์: สมดุลทั้งหมด; เติมคอลัมน์: สืบทอด; เติมคอลัมน์: เริ่มต้น;
6. ล้น
6.1. ล้นภายในคอนเทนเนอร์หลายคอลัมน์
ยกเว้นในกรณีที่จะทำให้คอลัมน์แตก เนื้อหาที่ขยายเกินขอบเขตของคอลัมน์จะขยายเกินขอบเขตของคอลัมน์และไม่ถูกตัดทอน สิ่งนี้ใช้กับรูปภาพเป็นหลัก เพื่อแก้ไขปัญหานี้ คุณต้องตั้งค่าคุณสมบัติต่อไปนี้สำหรับรูปภาพ:
Img ( display: block; /* ลบช่องว่างด้านล่างใต้ภาพ */ width: 100%; /* ขยายภาพจนเต็มความกว้างของบล็อกคอนเทนเนอร์ */ )
6.2. การแบ่งหน้าและล้นออกนอกคอนเทนเนอร์หลายคอลัมน์
เส้นเนื้อหาและตัวคั่นที่ขยายเกินคอลัมน์ที่ขอบของคอนเทนเนอร์แบบหลายคอลัมน์จะถูกตัดตามคุณสมบัติโอเวอร์โฟลว์
คอนเทนเนอร์แบบหลายคอลัมน์อาจมีคอลัมน์มากกว่าที่ว่างได้ เนื่องจากข้อจำกัดด้านความสูงของคอลัมน์ (เช่น ความสูงหรือความสูงสูงสุด) และการแบ่งคอลัมน์อย่างชัดเจน ในกรณีนี้ จะมีการสร้างคอลัมน์เพิ่มเติมตามทิศทางของแถว โดยจะย้ายไปยังหน้าถัดไป
ที่ โมดูลเค้าโครงหลายคอลัมน์ CSSขยาย โหมดเค้าโครงบล็อกเพื่อให้นิยามข้อความหลายคอลัมน์ได้ง่ายผู้คนมีปัญหาในการอ่านข้อความหากบรรทัดยาวเกินไป หากใช้เวลานานเกินไปในการเคลื่อนสายตาจากปลายบรรทัดหนึ่งไปยังจุดเริ่มต้นของบรรทัดถัดไป พวกเขาจะลืมว่าอยู่บรรทัดใด ดังนั้น เพื่อใช้ประโยชน์สูงสุดจากหน้าจอขนาดใหญ่ ผู้เขียนควรวางคอลัมน์ข้อความที่มีความกว้างจำกัดไว้เคียงข้างกัน เช่นเดียวกับที่หนังสือพิมพ์ทำ
น่าเสียดายที่การดำเนินการนี้เป็นไปไม่ได้กับ CSS และ HTML โดยไม่ต้องบังคับให้แบ่งคอลัมน์ในตำแหน่งคงที่ หรือจำกัดมาร์กอัปที่อนุญาตในข้อความอย่างรุนแรง หรือใช้สคริปต์แบบ Heroic ข้อจำกัดนี้แก้ไขได้โดยการเพิ่มคุณสมบัติ CSS ใหม่เพื่อขยายโหมดเค้าโครงบล็อกแบบเดิม
การใช้คอลัมน์
จำนวนคอลัมน์และความกว้าง
คุณสมบัติ CSS สองรายการควบคุมว่าจะแสดงกี่คอลัมน์และกี่คอลัมน์: จำนวนคอลัมน์ และความกว้างของคอลัมน์
คุณสมบัติการนับคอลัมน์จะกำหนดจำนวนคอลัมน์ให้เป็นจำนวนเฉพาะ เช่น.,
ตัวอย่างที่ 1
HTML
Lorem ipsum dolor นั่งตรง, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
ทำตามขั้นตอนต่อไปนี้: การออกกำลังกายแบบ nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat
Duis aute irure dolor ใน reprehenderit ใน voluptate velit esse cillum dolore eu fugiat nulla pariatur.
ยกเว้น occaecat cupidatat ไม่ภูมิใจ, sunt ใน culpa qui officia deserunt mollit anim id est laborum.
ซีเอสเอส
#col ( จำนวนคอลัมน์: 2; )ผลลัพธ์
จะแสดงเนื้อหาเป็นสองคอลัมน์ (หากคุณใช้เบราว์เซอร์ที่รองรับหลายคอลัมน์):
คุณสมบัติความกว้างของคอลัมน์กำหนดความกว้างของคอลัมน์ขั้นต่ำที่ต้องการ หากไม่ได้ตั้งค่าจำนวนคอลัมน์ด้วย เบราว์เซอร์จะสร้างคอลัมน์ให้พอดีกับความกว้างที่มีอยู่โดยอัตโนมัติ
ตัวอย่างที่ 2
HTML
ซีเอสเอส
#wid (ความกว้างคอลัมน์: 100px; )ผลลัพธ์
ในบล็อกแบบหลายคอลัมน์ เนื้อหาจะไหลจากคอลัมน์หนึ่งไปยังคอลัมน์ถัดไปโดยอัตโนมัติตามความจำเป็น ฟังก์ชัน HTML, CSS และ DOM ทั้งหมดได้รับการสนับสนุนภายในคอลัมน์ เช่นเดียวกับการแก้ไขและการพิมพ์
ชวเลขคอลัมน์
โดยส่วนใหญ่แล้ว นักออกแบบเว็บไซต์จะใช้หนึ่งในสองคุณสมบัติ CSS: column-count หรือ column-width เนื่องจากค่าสำหรับคุณสมบัติเหล่านี้ไม่ทับซ้อนกัน จึงมักจะสะดวกในการใช้คอลัมน์ชวเลข เช่น.
การประกาศ CSS ความกว้างของคอลัมน์: 12em สามารถถูกแทนที่ด้วยคอลัมน์: 12em
ตัวอย่างที่ 3
HTML
ซีเอสเอส
#col_short ( คอลัมน์: 12em; )จำนวนคอลัมน์การประกาศ CSS: 4 สามารถถูกแทนที่ด้วยคอลัมน์: 4
ตัวอย่างที่ 4
HTML
ซีเอสเอส
#columns_4 ( คอลัมน์: 4; )ผลลัพธ์
การประกาศ CSS ทั้งสองคอลัมน์มีความกว้าง: 8em และจำนวนคอลัมน์: 12 สามารถแทนที่ด้วยคอลัมน์: 12 8em
ตัวอย่างที่ 5
HTML
ซีเอสเอส
#columns_12 ( คอลัมน์: 12 8em; )ผลลัพธ์
การปรับสมดุลความสูง
ข้อกำหนดคอลัมน์ CSS3 กำหนดให้ความสูงของคอลัมน์ต้องสมดุล นั่นคือเบราว์เซอร์จะตั้งค่าความสูงคอลัมน์สูงสุดโดยอัตโนมัติ เพื่อให้ความสูงของเนื้อหาในแต่ละคอลัมน์มีค่าเท่ากันโดยประมาณ Firefox ทำเช่นนี้
อย่างไรก็ตาม ในบางสถานการณ์ การตั้งค่าความสูงสูงสุดของคอลัมน์อย่างชัดเจนก็มีประโยชน์เช่นกัน จากนั้นจึงจัดวางเนื้อหาโดยเริ่มต้นที่คอลัมน์แรกและสร้างคอลัมน์ให้มากเท่าที่จำเป็น ซึ่งอาจล้นไปทางขวาได้ ดังนั้น หากความสูงถูกจำกัด ด้วยการตั้งค่าความสูง CSS หรือคุณสมบัติความสูงสูงสุดบนบล็อกแบบหลายคอลัมน์ แต่ละคอลัมน์จะได้รับอนุญาตให้ขยายเป็นความสูงนั้นและไม่ต้องขยายเพิ่มก่อนที่จะเพิ่มคอลัมน์ใหม่ โหมดนี้ยังมีประสิทธิภาพมากขึ้นสำหรับการจัดวางอีกด้วย
ช่องว่างของคอลัมน์
มีช่องว่างระหว่างคอลัมน์ ค่าเริ่มต้นที่แนะนำคือ 1em ขนาดนี้สามารถเปลี่ยนแปลงได้โดยใช้คุณสมบัติช่องว่างคอลัมน์กับบล็อกหลายคอลัมน์:
ตัวอย่างที่ 6
HTML
ซีเอสเอส
#column_gap ( จำนวนคอลัมน์: 5; ช่องว่างคอลัมน์: 2em; )ผลลัพธ์
การย่อยสลายอย่างสง่างาม
คุณสมบัติของคอลัมน์จะถูกละเว้นโดยเบราว์เซอร์ที่ไม่รองรับคอลัมน์ ดังนั้นจึงค่อนข้างง่ายที่จะสร้างเลย์เอาต์ที่จะแสดงในคอลัมน์เดียวในเบราว์เซอร์เหล่านั้น และใช้หลายคอลัมน์ในเบราว์เซอร์ที่รองรับ
บทสรุป
คอลัมน์ CSS3 เป็นโครงร่างดั้งเดิมที่จะช่วยให้นักพัฒนาเว็บใช้ประโยชน์จากพื้นที่หน้าจอได้ดีที่สุด นักพัฒนาที่มีจินตนาการอาจพบว่ามีประโยชน์หลายอย่าง โดยเฉพาะกับคุณลักษณะการปรับสมดุลความสูงอัตโนมัติ
วิธีจัดเรียงข้อความบนหน้าหลายคอลัมน์? และสามารถทำได้โดยอัตโนมัติหรือไม่? แน่นอนว่าหลายท่านที่เคยเป็นหรือเคยเกี่ยวข้องกับการพัฒนาเว็บมาก่อนต้องเผชิญกับงานดังกล่าว - และมักจะพบวิธีแก้ปัญหาที่ซับซ้อนซึ่งต้องใช้สไตล์ที่ยุ่งยาก หรือการใช้ไลบรารี JavaScript เพิ่มเติม (ดูตัวอย่าง ปลั๊กอิน Columnizer สำหรับ jQuery)
เค้าโครงเนื้อหาหลายคอลัมน์ (เพื่อไม่ให้สับสนกับงานของเค้าโครงหน้าหลายคอลัมน์ทั่วไปซึ่งใกล้เคียงกับปัญหาการวางบล็อกบนกริด) ได้เข้ามาในโลกของมาตรฐานเว็บมาเป็นเวลานานและ ในที่สุด ยังไม่ถึงสถานะการแนะนำผู้สมัครในรูปแบบของ CSS3 Multi module -column Layout ที่สอดคล้องกัน แต่ยังได้รับการสนับสนุนที่ค่อนข้างกว้างในเบราว์เซอร์: บางแห่งที่มีคำนำหน้า (-moz- หรือ -webkit-) และบางแห่งในปัจจุบัน (Opera 11.1+) และเวอร์ชันที่วางแผนไว้ (IE10+) โดยไม่ต้องมีคำนำหน้าทันที
ความคิดเห็น
ในกรณีของ Internet Explorer 10 หมายความว่าคุณสามารถใช้ CSS3 หลายคอลัมน์ได้โดยอัตโนมัติเมื่อพัฒนาแอปสไตล์ Metro ของ Windows 8 โดยใช้ HTML/CSS/JS
สำหรับวัตถุประสงค์ของบทความนี้ ฉันจะไม่ใช้คำนำหน้าเบราว์เซอร์เพื่อสร้างความสับสนให้กับโค้ด แต่ในการใช้งานจริง อย่าลืมเพิ่มการรองรับคำนำหน้าสำหรับ Firefox, Safari และ Chrome
ฉันจะทราบรายละเอียดที่สำคัญอีกสองประการทันที
ประการแรกในกรณีส่วนใหญ่ การใช้เค้าโครงหลายคอลัมน์สำหรับข้อความถือได้ว่าเป็นการพัฒนาการแสดงเนื้อหาไซต์ตามเส้นทางการปรับปรุงแบบก้าวหน้า ซึ่งผู้ใช้ไซต์ที่ทันสมัยกว่าจะได้รับสินค้ามากขึ้น:
ประการที่สอง การแสดงแบบหลายคอลัมน์ทำงานได้ดีกับความสามารถของ Media Queries (และแนวคิดการออกแบบที่ตอบสนอง ) ตัวอย่างเช่น ในขนาดหน้าจอที่แตกต่างกัน คุณสามารถจัดรูปแบบข้อความเป็นคอลัมน์จำนวนต่างๆ ได้:
และสิ่งสุดท้ายที่ฉันอยากจะทราบในบทนำเพื่อที่จะไม่ต้องพูดถึงเรื่องนี้ต่อไปและดำเนินการต่อด้วยความรู้สึกผิดชอบชั่วดีที่ชัดเจนในรายละเอียดทางเทคนิค: เมื่อใช้เค้าโครงข้อความแบบหลายคอลัมน์เราต้องจำไว้ว่าการจัดเรียงดังกล่าวยังบ่งบอกถึง ลำดับการอ่านบางอย่าง (สำหรับภาษายุโรปจากซ้ายไปขวา) ดังนั้นจึงเป็นสิ่งสำคัญที่ในการโอนการจ้องมองจากคอลัมน์หนึ่งไปยังอีกคอลัมน์หนึ่ง จำเป็นต้องดำเนินการเพิ่มเติมให้น้อยที่สุดเท่าที่จะเป็นไปได้ โดยเฉพาะสำหรับการเลื่อนแนวตั้ง:
ในแง่นี้ ลักษณะแนวนอนของคอลัมน์จะรวมเข้ากับการเลื่อนในแนวนอนได้ดีกว่า (เนื่องจากใช้ในแอปพลิเคชันจำนวนมากสำหรับ Win8 - ตัวอย่างเช่น เห็นได้ชัดเจนในแอปพลิเคชัน USA Today):
โดยทั่วไปแล้ววิทยากรนั้นยอดเยี่ยม แต่อย่าลืมความสะดวกสบายของผู้ใช้ด้วย และตอนนี้เพื่อต่อสู้!
ลำโพง
ดังนั้นเราจึงมีข้อความ (เนื้อหา) ที่เราต้องการวางไว้ในหลายคอลัมน์ จะเริ่มต้นที่ไหน?
หากต้องการเปลี่ยนองค์ประกอบดังกล่าวให้เป็นองค์ประกอบแบบหลายคอลัมน์ คุณต้องตั้งค่าคุณสมบัติอย่างใดอย่างหนึ่งต่อไปนี้ผ่านสไตล์ CSS: ความกว้างของคอลัมน์หรือ จำนวนคอลัมน์ไปเป็นค่าอื่นที่ไม่ใช่ อัตโนมัติ. ตัวอย่างเช่น,
หากต้องการแยกข้อความออกเป็นสองคอลัมน์ ให้ทำดังนี้
บทความ ( จำนวนคอลัมน์: 2; )
เบราว์เซอร์จะดำเนินการส่วนที่เหลือ: 
คุณสมบัติทางเลือก - ความกว้างของคอลัมน์- ช่วยให้คุณกำหนดความกว้างที่เหมาะสมที่สุดของคอลัมน์:
บทความ ( ความกว้างของคอลัมน์: 150px; )
ในขณะเดียวกัน เบราว์เซอร์เองก็แบ่งเนื้อหาออกเป็นคอลัมน์ตามจำนวนที่ต้องการเพื่อเติมเต็มคอนเทนเนอร์ภายนอก โดยปรับตามความกว้างของคอลัมน์ที่ระบุ จุดสำคัญก็คือ ความกว้างจริงอาจแตกต่างจากที่ระบุขึ้นหรือลง: ในภาพด้านบน แถบสีเทามีความกว้าง 150px พอดี และอย่างที่คุณเห็น แถบนี้เล็กกว่าความกว้างจริงของคอลัมน์
ลักษณะการทำงานนี้กำหนดโดยข้อกำหนดและช่วยให้ (โดยอัตโนมัติ) มีความยืดหยุ่นมากขึ้นเมื่อพัฒนามาร์กอัปแบบตอบสนอง:
ตัวอย่างเช่น หากคุณมีคอนเทนเนอร์ขนาดกว้าง 100px และตั้งค่าคอลัมน์ให้มีความกว้าง 45px เบราว์เซอร์จะพิจารณาว่ามีเพียง 2 คอลัมน์เท่านั้นที่จะพอดี และหากต้องการเติมเต็มพื้นที่ทั้งหมด เบราว์เซอร์จะเพิ่มขนาดของแต่ละคอลัมน์เป็น 50px (ซึ่งจะคำนึงถึงระยะห่างระหว่างคอลัมน์ด้วย ซึ่งจะกล่าวถึงในหัวข้อถัดไป)
ในแง่หนึ่ง สิ่งนี้สามารถเห็นเป็นทางเลือกแทนการระบุจำนวนคอลัมน์ที่แตกต่างกันโดยใช้ Media Queries ขึ้นอยู่กับขนาดหน้าต่างและคำนวณความกว้างของคอลัมน์โดยอัตโนมัติ:
@media (min-width:400px) ( บทความ ( จำนวนคอลัมน์: 2; ) ) @media (min-width:600px) ( บทความ ( จำนวนคอลัมน์: 3; ) ) ...
นี่เป็นครั้งที่สองที่ฉันกำลังพูดถึงทางเลือกอื่น และนี่คือเหตุผล
นับเทียบกับ ความกว้าง
ตามที่ควรจะชัดเจนจากคำอธิบายข้างต้น ข้อกำหนดนี้มีสองวิธีในการตั้งค่าจำนวนและความกว้างของคอลัมน์ (อย่างไรก็ตาม จะเหมือนกันสำหรับทุกคอลัมน์!):- จำนวนคอลัมน์ช่วยให้คุณระบุจำนวนคอลัมน์ที่คุณต้องการแบ่งเนื้อหาในขณะที่เบราว์เซอร์กำหนดความกว้างของคอลัมน์โดยคำนึงถึงพื้นที่ว่าง
- ความกว้างของคอลัมน์มาจากด้านหลัง: ระบุว่าคอลัมน์ควรอยู่ที่ประมาณเท่าใด แต่ปล่อยให้การคำนวณหมายเลขขึ้นอยู่กับดุลยพินิจของเบราว์เซอร์
คอลัมน์: 12em; /* ความกว้างของคอลัมน์: 12em; จำนวนคอลัมน์: อัตโนมัติ; */ คอลัมน์: 2; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: 2; */คอลัมน์: อัตโนมัติ; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: อัตโนมัติ; */ คอลัมน์: อัตโนมัติ 12em; /* ความกว้างของคอลัมน์: 12em; จำนวนคอลัมน์: อัตโนมัติ; */คอลัมน์: 2 อัตโนมัติ; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: 2; */
จะเกิดอะไรขึ้นหากคุณระบุทั้งจำนวนคอลัมน์และความกว้างที่เหมาะสมที่สุด ตามข้อกำหนดในกรณีนี้ จำนวนคอลัมน์กำหนดจำนวนคอลัมน์สูงสุด:
บทความ ( คอลัมน์: 150px 3; /* ความกว้างของคอลัมน์: 150px; จำนวนคอลัมน์: 3; */ )
ที่จริงแล้ว จากการวิวัฒนาการของมาตรฐานเว็บ รวมถึงบทความบางส่วนของฉันเกี่ยวกับ CSS3 (ดูตัวอย่าง) ฉันหวังว่าคุณจะมองเห็นความเป็นไปได้ที่เปิดกว้างสำหรับนักพัฒนาเว็บโดยไม่มีแรงบันดาลใจไม่น้อยไปกว่านี้ เครื่องมือการจัดการเนื้อหาที่ตอบสนอง ยืดหยุ่น และทรงพลังกำลังใกล้เข้ามามากขึ้นเรื่อยๆ และการแก้ปัญหาที่ซับซ้อนก็ง่ายขึ้น
เชิงโต้ตอบ
คุณสามารถลองใช้ CSS3 Multi-column ได้ที่ ietestdrive.com :
ลอง, ทดลอง. รายงานข้อบกพร่องให้กับนักพัฒนาเบราว์เซอร์ และอย่าลืมคิดถึงสิ่งที่ผู้ใช้เบราว์เซอร์รุ่นเก่า (และดูเหมือนทันสมัย แต่ยังไม่เป็นไปตามมาตรฐาน) จะเห็น - ตัวอย่างเช่น คุณสามารถใช้ปลั๊กอิน jQuery Columnizer ตระหนักถึงความสามารถในการปรับตัวและผู้ชมบนหน้าจอขนาดเล็กและขนาดใหญ่
วิธีจัดเรียงข้อความบนหน้าหลายคอลัมน์? และสามารถทำได้โดยอัตโนมัติหรือไม่? แน่นอนว่าหลายท่านที่เคยเป็นหรือเคยเกี่ยวข้องกับการพัฒนาเว็บมาก่อนต้องเผชิญกับงานดังกล่าว - และมักจะพบวิธีแก้ปัญหาที่ซับซ้อนซึ่งต้องใช้สไตล์ที่ยุ่งยาก หรือการใช้ไลบรารี JavaScript เพิ่มเติม (ดูตัวอย่าง ปลั๊กอิน Columnizer สำหรับ jQuery)
เค้าโครงเนื้อหาหลายคอลัมน์ (เพื่อไม่ให้สับสนกับงานของเค้าโครงหน้าหลายคอลัมน์ทั่วไปซึ่งใกล้เคียงกับปัญหาการวางบล็อกบนกริด) ได้เข้ามาในโลกของมาตรฐานเว็บมาเป็นเวลานานและ ในที่สุด ยังไม่ถึงสถานะการแนะนำผู้สมัครในรูปแบบของ CSS3 Multi module -column Layout ที่สอดคล้องกัน แต่ยังได้รับการสนับสนุนที่ค่อนข้างกว้างในเบราว์เซอร์: บางแห่งที่มีคำนำหน้า (-moz- หรือ -webkit-) และบางแห่งในปัจจุบัน (Opera 11.1+) และเวอร์ชันที่วางแผนไว้ (IE10+) โดยไม่ต้องมีคำนำหน้าทันที
ความคิดเห็น
ในกรณีของ Internet Explorer 10 หมายความว่าคุณสามารถใช้ CSS3 หลายคอลัมน์ได้โดยอัตโนมัติเมื่อพัฒนาแอปสไตล์ Metro ของ Windows 8 โดยใช้ HTML/CSS/JS
สำหรับวัตถุประสงค์ของบทความนี้ ฉันจะไม่ใช้คำนำหน้าเบราว์เซอร์เพื่อสร้างความสับสนให้กับโค้ด แต่ในการใช้งานจริง อย่าลืมเพิ่มการรองรับคำนำหน้าสำหรับ Firefox, Safari และ Chrome
ฉันจะทราบรายละเอียดที่สำคัญอีกสองประการทันที
ประการแรกในกรณีส่วนใหญ่ การใช้เค้าโครงหลายคอลัมน์สำหรับข้อความถือได้ว่าเป็นการพัฒนาการแสดงเนื้อหาไซต์ตามเส้นทางการปรับปรุงแบบก้าวหน้า ซึ่งผู้ใช้ไซต์ที่ทันสมัยกว่าจะได้รับสินค้ามากขึ้น:
ประการที่สอง การแสดงแบบหลายคอลัมน์ทำงานได้ดีกับความสามารถของ Media Queries (และแนวคิดการออกแบบที่ตอบสนอง ) ตัวอย่างเช่น ในขนาดหน้าจอที่แตกต่างกัน คุณสามารถจัดรูปแบบข้อความเป็นคอลัมน์จำนวนต่างๆ ได้:
และสิ่งสุดท้ายที่ฉันอยากจะทราบในบทนำเพื่อที่จะไม่ต้องพูดถึงเรื่องนี้ต่อไปและดำเนินการต่อด้วยความรู้สึกผิดชอบชั่วดีที่ชัดเจนในรายละเอียดทางเทคนิค: เมื่อใช้เค้าโครงข้อความแบบหลายคอลัมน์เราต้องจำไว้ว่าการจัดเรียงดังกล่าวยังบ่งบอกถึง ลำดับการอ่านบางอย่าง (สำหรับภาษายุโรปจากซ้ายไปขวา) ดังนั้นจึงเป็นสิ่งสำคัญที่ในการโอนการจ้องมองจากคอลัมน์หนึ่งไปยังอีกคอลัมน์หนึ่ง จำเป็นต้องดำเนินการเพิ่มเติมให้น้อยที่สุดเท่าที่จะเป็นไปได้ โดยเฉพาะสำหรับการเลื่อนแนวตั้ง:
ในแง่นี้ ลักษณะแนวนอนของคอลัมน์จะรวมเข้ากับการเลื่อนในแนวนอนได้ดีกว่า (เนื่องจากใช้ในแอปพลิเคชันจำนวนมากสำหรับ Win8 - ตัวอย่างเช่น เห็นได้ชัดเจนในแอปพลิเคชัน USA Today):
โดยทั่วไปแล้ววิทยากรนั้นยอดเยี่ยม แต่อย่าลืมความสะดวกสบายของผู้ใช้ด้วย และตอนนี้เพื่อต่อสู้!
ลำโพง
ดังนั้นเราจึงมีข้อความ (เนื้อหา) ที่เราต้องการวางไว้ในหลายคอลัมน์ จะเริ่มต้นที่ไหน?
หากต้องการเปลี่ยนองค์ประกอบดังกล่าวให้เป็นองค์ประกอบแบบหลายคอลัมน์ คุณต้องตั้งค่าคุณสมบัติอย่างใดอย่างหนึ่งต่อไปนี้ผ่านสไตล์ CSS: ความกว้างของคอลัมน์หรือ จำนวนคอลัมน์ไปเป็นค่าอื่นที่ไม่ใช่ อัตโนมัติ. ตัวอย่างเช่น,
หากต้องการแยกข้อความออกเป็นสองคอลัมน์ ให้ทำดังนี้
บทความ ( จำนวนคอลัมน์: 2; )
เบราว์เซอร์จะดำเนินการส่วนที่เหลือ:
คุณสมบัติทางเลือก - ความกว้างของคอลัมน์- ช่วยให้คุณกำหนดความกว้างที่เหมาะสมที่สุดของคอลัมน์:
บทความ ( ความกว้างของคอลัมน์: 150px; )
ในขณะเดียวกัน เบราว์เซอร์เองก็แบ่งเนื้อหาออกเป็นคอลัมน์ตามจำนวนที่ต้องการเพื่อเติมเต็มคอนเทนเนอร์ภายนอก โดยปรับตามความกว้างของคอลัมน์ที่ระบุ จุดสำคัญก็คือ ความกว้างจริงอาจแตกต่างจากที่ระบุขึ้นหรือลง: ในภาพด้านบน แถบสีเทามีความกว้าง 150px พอดี และอย่างที่คุณเห็น แถบนี้เล็กกว่าความกว้างจริงของคอลัมน์
ลักษณะการทำงานนี้กำหนดโดยข้อกำหนดและช่วยให้ (โดยอัตโนมัติ) มีความยืดหยุ่นมากขึ้นเมื่อพัฒนามาร์กอัปแบบตอบสนอง:
ตัวอย่างเช่น หากคุณมีคอนเทนเนอร์ขนาดกว้าง 100px และตั้งค่าคอลัมน์ให้มีความกว้าง 45px เบราว์เซอร์จะพิจารณาว่ามีเพียง 2 คอลัมน์เท่านั้นที่จะพอดี และหากต้องการเติมเต็มพื้นที่ทั้งหมด เบราว์เซอร์จะเพิ่มขนาดของแต่ละคอลัมน์เป็น 50px (ซึ่งจะคำนึงถึงระยะห่างระหว่างคอลัมน์ด้วย ซึ่งจะกล่าวถึงในหัวข้อถัดไป)
ในแง่หนึ่ง สิ่งนี้สามารถเห็นเป็นทางเลือกแทนการระบุจำนวนคอลัมน์ที่แตกต่างกันโดยใช้ Media Queries ขึ้นอยู่กับขนาดหน้าต่างและคำนวณความกว้างของคอลัมน์โดยอัตโนมัติ:
@media (min-width:400px) ( บทความ ( จำนวนคอลัมน์: 2; ) ) @media (min-width:600px) ( บทความ ( จำนวนคอลัมน์: 3; ) ) ...
นี่เป็นครั้งที่สองที่ฉันกำลังพูดถึงทางเลือกอื่น และนี่คือเหตุผล
นับเทียบกับ ความกว้าง
ตามที่ควรจะชัดเจนจากคำอธิบายข้างต้น ข้อกำหนดนี้มีสองวิธีในการตั้งค่าจำนวนและความกว้างของคอลัมน์ (อย่างไรก็ตาม จะเหมือนกันสำหรับทุกคอลัมน์!):- จำนวนคอลัมน์ช่วยให้คุณระบุจำนวนคอลัมน์ที่คุณต้องการแบ่งเนื้อหาในขณะที่เบราว์เซอร์กำหนดความกว้างของคอลัมน์โดยคำนึงถึงพื้นที่ว่าง
- ความกว้างของคอลัมน์มาจากด้านหลัง: ระบุว่าคอลัมน์ควรอยู่ที่ประมาณเท่าใด แต่ปล่อยให้การคำนวณหมายเลขขึ้นอยู่กับดุลยพินิจของเบราว์เซอร์
คอลัมน์: 12em; /* ความกว้างของคอลัมน์: 12em; จำนวนคอลัมน์: อัตโนมัติ; */ คอลัมน์: 2; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: 2; */คอลัมน์: อัตโนมัติ; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: อัตโนมัติ; */ คอลัมน์: อัตโนมัติ 12em; /* ความกว้างของคอลัมน์: 12em; จำนวนคอลัมน์: อัตโนมัติ; */คอลัมน์: 2 อัตโนมัติ; /* ความกว้างของคอลัมน์: อัตโนมัติ; จำนวนคอลัมน์: 2; */
จะเกิดอะไรขึ้นหากคุณระบุทั้งจำนวนคอลัมน์และความกว้างที่เหมาะสมที่สุด ตามข้อกำหนดในกรณีนี้ จำนวนคอลัมน์กำหนดจำนวนคอลัมน์สูงสุด:
บทความ ( คอลัมน์: 150px 3; /* ความกว้างของคอลัมน์: 150px; จำนวนคอลัมน์: 3; */ )
ที่จริงแล้ว จากการวิวัฒนาการของมาตรฐานเว็บ รวมถึงบทความบางส่วนของฉันเกี่ยวกับ CSS3 (ดูตัวอย่าง) ฉันหวังว่าคุณจะมองเห็นความเป็นไปได้ที่เปิดกว้างสำหรับนักพัฒนาเว็บโดยไม่มีแรงบันดาลใจไม่น้อยไปกว่านี้ เครื่องมือการจัดการเนื้อหาที่ตอบสนอง ยืดหยุ่น และทรงพลังกำลังใกล้เข้ามามากขึ้นเรื่อยๆ และการแก้ปัญหาที่ซับซ้อนก็ง่ายขึ้น
เชิงโต้ตอบ
คุณสามารถลองใช้ CSS3 Multi-column ได้ที่ ietestdrive.com :
ลอง, ทดลอง. รายงานข้อบกพร่องให้กับนักพัฒนาเบราว์เซอร์ และอย่าลืมคิดถึงสิ่งที่ผู้ใช้เบราว์เซอร์รุ่นเก่า (และดูเหมือนทันสมัย แต่ยังไม่เป็นไปตามมาตรฐาน) จะเห็น - ตัวอย่างเช่น คุณสามารถใช้ปลั๊กอิน jQuery Columnizer ตระหนักถึงความสามารถในการปรับตัวและผู้ชมบนหน้าจอขนาดเล็กและขนาดใหญ่