ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 10 CSS3 Multiple Columns ตอน 3
3.column-rule การสร้างเส้นขั้นระหว่างคอลัมน์ โดยใช้คำสั่งcolumn-rule:ขนาดความหนาของเส้นขั้นคอมลัมน์  outset สีของเส้นขั้นที่เราต้องการ;; (ในตัวอย่างนี้ใช้ขนาดความหนาของเส้นกั้นคอมลัมน์มีหน่วยเป็น px)

<html>
<head>
<style> 
.newspaper
{-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;

-moz-column-gap:100px; /* Firefox */
-webkit-column-gap:100px; /* Safari and Chrome */
column-gap:100px;

-moz-column-rule:10px outset pink; /* Firefox */
-webkit-column-rule:10px outset pink; /* Safari and Chrome */
column-rule:10px outset pink;}
</style>
</head>
<body>

<div>
ทมยันตี เป็นนามปากกาของ คุณหญิงวิมล เจียมเจริญ หรือชื่อโดยกำเนิด วิมล ศิริไพบูลย์ (10 กรกฎาคม พ.ศ. 2480?ปัจจุบัน) เป็นนักประพันธ์นวนิยายจำนวน 100 เรื่อง[ต้องการอ้างอิง] หลายเรื่องได้รับความนิยมในประเทศไทย[ใครกล่าว?] อาทิ คู่กรรม ทวิภพ ค่าของคน อุบัติเหตุ พ่อปลาไหล ซึ่งมีผู้นำไปสร้างเป็นภาพยนตร์และละครโทรทัศน์ในหลายยุคหลายสมัย
  นอกจากจะมีความสามารถในการเขียนแล้ว วิมลยังเคยมีชื่อเสียงโด่งดังเป็นที่นิยมอย่างสูงในฐานะนักพูด[ใครกล่าว?] แนวการพูดของวิมล คือโน้มนำให้ประชาชนรักชาติ เสียสละเพื่อชาติ และมีความยึดมั่นในชาติ ศาสนา พระมหากษัตริย์[ต้องการอ้างอิง] วิมลชื่อว่ามีความสัมพันธ์แน่นแฟ้นกับฝ่ายทหาร และมักสนับสนุนระบอบทหาร ในช่วงเหตุการณ์ 6 ตุลา พ.ศ. 2519 วิมลมีบทบาทเป็นแกนนำสำคัญของชมรมแม่บ้าน ซึ่งเป็นการรวมกลุ่มของภรรยาข้าราชการ ภรรยานายพล และแม่บ้าน กับทั้งเคยปราศรัยโจมตีขบวนการนักศึกษาที่ออกมาเรียกร้องประชาธิปไตยว่า เป็นผู้บ่อนทำลายมิตรประเทศ คือ สหรัฐอเมริกา[1] ภายหลังเหตุการณ์ดังกล่าว วิมลได้รับแต่งตั้งจากรัฐบาลทหารให้เป็นสมาชิกสภาปฏิรูปการปกครองแผ่นดิน
  นอกจากความสัมพันธ์กับฝ่ายทหารในด้านหน้าที่การงานแล้ว ในด้านความประพฤติส่วนตัวนั้น วิมล ขณะดำรงตำแหน่งสมาชิกวุฒิสภา ยังเคยถูกศาลฎีกาพิพากษาว่าเป็นชู้กับนายทหารซึ่งเป็นเพื่อนสมาชิกวุฒิสภาด้วยกัน และให้หย่าขาดจากสามีด้วย คดีนี้เป็นที่รู้จักกันในชื่อ "คดีทมยันตี" หรือ "คดีชู้รักบันลือโลก"
</div>

</body>
</html>


ผลลัพธ์คือ
   นอกจากนี้แล้วลักษณะของเส้นขั้นยังมีอีกหลากหลาย โดยใช้คำสั่ง column-rule-style:รูปแบบที่ต้องการ; ตัวอย่างเช่น
    - เส้นขั้นคอลัมน์แบบจุด (dotted)

<html>
<head>
<style> 
.newspaper
{-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:100px; /* Firefox */
-webkit-column-gap:100px; /* Safari and Chrome */
column-gap:100px;

-moz-column-rule:10px outset pink; /* Firefox */
-webkit-column-rule:10px outset pink; /* Safari and Chrome */
column-rule:10px outset pink;

-moz-column-rule-style: dotted; /* Firefox */
-webkit-column-rule-style: dotted; /* Safari and Chrome */
column-rule-style: dotted;}
</style>
</head>
<body>

<div>
ทมยันตี เป็นนามปากกาของ คุณหญิงวิมล เจียมเจริญ หรือชื่อโดยกำเนิด วิมล ศิริไพบูลย์ (10 กรกฎาคม พ.ศ. 2480?ปัจจุบัน) เป็นนักประพันธ์นวนิยายจำนวน 100 เรื่อง[ต้องการอ้างอิง] หลายเรื่องได้รับความนิยมในประเทศไทย[ใครกล่าว?] อาทิ คู่กรรม ทวิภพ ค่าของคน อุบัติเหตุ พ่อปลาไหล ซึ่งมีผู้นำไปสร้างเป็นภาพยนตร์และละครโทรทัศน์ในหลายยุคหลายสมัย
  นอกจากจะมีความสามารถในการเขียนแล้ว วิมลยังเคยมีชื่อเสียงโด่งดังเป็นที่นิยมอย่างสูงในฐานะนักพูด[ใครกล่าว?] แนวการพูดของวิมล คือโน้มนำให้ประชาชนรักชาติ เสียสละเพื่อชาติ และมีความยึดมั่นในชาติ ศาสนา พระมหากษัตริย์[ต้องการอ้างอิง] วิมลชื่อว่ามีความสัมพันธ์แน่นแฟ้นกับฝ่ายทหาร และมักสนับสนุนระบอบทหาร ในช่วงเหตุการณ์ 6 ตุลา พ.ศ. 2519 วิมลมีบทบาทเป็นแกนนำสำคัญของชมรมแม่บ้าน ซึ่งเป็นการรวมกลุ่มของภรรยาข้าราชการ ภรรยานายพล และแม่บ้าน กับทั้งเคยปราศรัยโจมตีขบวนการนักศึกษาที่ออกมาเรียกร้องประชาธิปไตยว่า เป็นผู้บ่อนทำลายมิตรประเทศ คือ สหรัฐอเมริกา[1] ภายหลังเหตุการณ์ดังกล่าว วิมลได้รับแต่งตั้งจากรัฐบาลทหารให้เป็นสมาชิกสภาปฏิรูปการปกครองแผ่นดิน
</div>
</body>
</html>

ผลลัพธ์คือ

    ถ้าหากต้องการใช้รูปแบบอย่างอื่น ให้เปลี่ยนจาก column-rule-style: dotted;   เป็นรูปแบบอื่นเช่น 
-dashed (เส้นปะ) เป็น column-rule-style: dashed;
-solid (เส้นแบบธรรมดา) เป็น column-rule-style: solid;
-double (เส้นคู่) เป็น column-rule-style: double;
- เป็น column-rule-style: ;
- เป็น column-rule-style: ;


อ่านเพิ่มเติม
บทที่ 10 CSS3 Multiple Columns ตอน 1
บทที่ 10 CSS3 Multiple Columns ตอน 2


ข้อมูลอ้างอิง

http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q อยากทราบวิธีสร้างตัวแปรเก็บค่าที่ได้จาก api
โดย birdkritsna อ 24 ก.ย. 2019 1:31 pm บอร์ด Programming - PHP
1
7
อ 24 ก.ย. 2019 1:44 pm โดย thatsawan
งานประจำวันที่ 24 กันยายน 2562
โดย Patipat อ 24 ก.ย. 2019 10:20 am บอร์ด M088 - ปฏิภัทร สารธรรม
0
1
อ 24 ก.ย. 2019 10:20 am โดย Patipat
งานประจำวันที่ 24 กันยายน 2562
โดย chatee supasand อ 24 ก.ย. 2019 10:15 am บอร์ด MT33 - นายชาตรี สุภาแสน
0
1
อ 24 ก.ย. 2019 10:15 am โดย chatee supasand
งานประจำวันที่ 24 กันยายน 2562
โดย birdkritsna อ 24 ก.ย. 2019 10:14 am บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
0
4
อ 24 ก.ย. 2019 10:14 am โดย birdkritsna
งานประจำวันที่ 24 กันยายน 2562
โดย aninthana อ 24 ก.ย. 2019 10:14 am บอร์ด M092 - อนินธนา บุญยัง
0
1
อ 24 ก.ย. 2019 10:14 am โดย aninthana
งานประจำวันที่ 24 กันยายน 2562
โดย jamepiyawat อ 24 ก.ย. 2019 10:06 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
3
อ 24 ก.ย. 2019 10:06 am โดย jamepiyawat
งานประจำวันที่ 24 กันยายน 2562
โดย jirawoot อ 24 ก.ย. 2019 10:06 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
2
อ 24 ก.ย. 2019 10:06 am โดย jirawoot
B - FTP Connect Failed เกิดตอนสร้าง แพกเก็จ
โดย thatsawan จ 23 ก.ย. 2019 9:58 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:58 pm โดย thatsawan
Q - จะสร้าง Hosting ระบบให้ไปสร้าง domain ก่อน พอสร้าง domain เสร็จระบบสร้าง hosting ให้
โดย thatsawan จ 23 ก.ย. 2019 9:53 pm บอร์ด Buildin - Tester
0
2
จ 23 ก.ย. 2019 9:53 pm โดย thatsawan
R - ตอน สร้างเว็บไซต์ให้เสร็จเเล้ว หน้า Manage Packages ควรมีปุ่มพาไปยังหน้า จัดการหรือหน้า admin เพิ่ม
โดย thatsawan จ 23 ก.ย. 2019 9:41 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:41 pm โดย thatsawan
B - Packages Web E-Commerce ไม่มี Free เเละมี Template ให้เลือกไม่เท่า Joomla Website
โดย thatsawan จ 23 ก.ย. 2019 9:36 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:36 pm โดย thatsawan
B - ตอนเรากำลังสร้าง Packages จะมีปุ่ม Other Packages พอคลิกเลือก Packages ใหม่ข้อมูลที่กรอกต้องกรอกใหม่
โดย thatsawan จ 23 ก.ย. 2019 9:33 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:33 pm โดย thatsawan
R - ตอนเลือก Package Templates ไม่มีตัวอย่างรูปแบบ Template ให้ดู เเละไม่รู้ควรจะเลือกอะไร
โดย thatsawan จ 23 ก.ย. 2019 9:30 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:30 pm โดย thatsawan
B - สัญญาลักษณ์ ? คลิกดูไกด์ ไม่ได้
โดย thatsawan จ 23 ก.ย. 2019 9:29 pm บอร์ด Buildin - Tester
0
1
จ 23 ก.ย. 2019 9:29 pm โดย thatsawan
เปลี่ยนเทียบความน่าซื้อของ Smart Watch รุ่นต่างๆ รุ่นไหนคุ้มค่าที่สุด
โดย chatee supasand จ 23 ก.ย. 2019 7:47 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
3
จ 23 ก.ย. 2019 7:47 pm โดย chatee supasand
เงื่อนไข การค้นหา คำที่อยากให้มี และ คำที่ไม่อยากให้มี
โดย aninthana จ 23 ก.ย. 2019 7:22 pm บอร์ด Wordpress Developing Knowledge
0
16
จ 23 ก.ย. 2019 7:22 pm โดย aninthana
เทคนิค การออกแบบรหัสสินค้าหรือบริการ
โดย aninthana จ 23 ก.ย. 2019 6:59 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
2
25
อ 24 ก.ย. 2019 2:00 pm โดย mindphp
รู้จักกับ Intelligent Building คืออะไร
โดย birdkritsna จ 23 ก.ย. 2019 5:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
จ 23 ก.ย. 2019 5:50 pm โดย birdkritsna
Drone เพื่อการโจมตีรูปแบบใหม่
โดย birdkritsna จ 23 ก.ย. 2019 5:18 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
จ 23 ก.ย. 2019 5:18 pm โดย birdkritsna
การเขียนคำอธิบายโค้ด ใน css เพื่อเป็นคำอธิบายกันลืมโค้ด
โดย jamepiyawat จ 23 ก.ย. 2019 5:12 pm บอร์ด CSS Knowledge
0
13
จ 23 ก.ย. 2019 5:12 pm โดย jamepiyawat