ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การจ้างงานผู้พิการ
โดย fighthrmd125 พฤ 25 ก.พ. 2021 5:53 pm บอร์ด Share Knowledge
0
3
พฤ 25 ก.พ. 2021 5:53 pm โดย fighthrmd125
แนวทางการสรรหา ช่องทาง สรรหาผู้พิการเข้าทำงาน
โดย fighthrmd125 พฤ 25 ก.พ. 2021 5:12 pm บอร์ด Share Knowledge
0
1
พฤ 25 ก.พ. 2021 5:12 pm โดย fighthrmd125
Google Structured ส่วนการ vote ในบทความจะดึงข้อมูลมาจากไหนค่ะ
โดย eange08 พฤ 25 ก.พ. 2021 5:04 pm บอร์ด Joomla Development
1
6
พฤ 25 ก.พ. 2021 5:34 pm โดย eange08
B - ระบบ LINE API ไม่ตอบพบข้อมูล [2021-02][001]
โดย tsukasaz พฤ 25 ก.พ. 2021 3:35 pm บอร์ด MlineCRM Line + MD-CRM
1
6
พฤ 25 ก.พ. 2021 3:35 pm โดย tsukasaz
สอบถามจะเอา logo มาใส่ที่ publisher ต้องดึงมาจากไหน
โดย eange08 พฤ 25 ก.พ. 2021 3:26 pm บอร์ด Joomla Development
1
8
พฤ 25 ก.พ. 2021 3:30 pm โดย tsukasaz
ขั้นตอนและการเตรียมตัว การสรรหา ว่าจ้าง พนักงานพิการเข้าทำงาน
โดย fighthrmd125 พฤ 25 ก.พ. 2021 3:02 pm บอร์ด Share Knowledge
0
4
พฤ 25 ก.พ. 2021 3:02 pm โดย fighthrmd125
ทำ google structured ถ้าจะเอาค่า name publisher ได้จากไหนค่ะ
โดย eange08 พฤ 25 ก.พ. 2021 1:19 pm บอร์ด Joomla Development
2
12
พฤ 25 ก.พ. 2021 2:56 pm โดย eange08
หลักการเตรียมตัวก่อนเข้าสัมภาษณ์งาน กับบริษัททางด้านไอที
โดย fighthrmd125 พ 24 ก.พ. 2021 5:21 pm บอร์ด Share Knowledge
0
25
พ 24 ก.พ. 2021 5:21 pm โดย fighthrmd125