CSS หลายคอลัมน์

สารบัญ

เค้าโครงหลายคอลัมน์ CSS

เค้าโครงหลายคอลัมน์ CSS ช่วยให้สามารถกำหนดข้อความหลายคอลัมน์ได้อย่างง่ายดาย เช่นเดียวกับในหนังสือพิมพ์:

Daily Ping

Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

คุณสมบัติ CSS หลายคอลัมน์

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติหลายคอลัมน์ต่อไปนี้:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับคุณสมบัตินี้โดยสมบูรณ์

Property
column-count	50.0	10.0	52.0	9.0	37.0
column-gap	50.0	10.0	52.0	9.0	37.0
column-rule	50.0	10.0	52.0	9.0	37.0
column-rule-color	50.0	10.0	52.0	9.0	37.0
column-rule-style	50.0	10.0	52.0	9.0	37.0
column-rule-width	50.0	10.0	52.0	9.0	37.0
column-span	50.0	10.0	71.0	9.0	37.0
column-width	50.0	10.0	52.0	9.0	37.0

CSS สร้างหลายคอลัมน์

column-count คุณสมบัติระบุจำนวนคอลัมน์ที่องค์ประกอบควรจะ จะถูกแบ่งออกเป็น

ตัวอย่างต่อไปนี้จะแบ่งข้อความในองค์ประกอบ <div> ออกเป็น 3 คอลัมน์:

ตัวอย่าง

div
{
  column-count: 3;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
}
</style>
</head>
<body>

<h1>Create Multiple Columns</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

CSS ระบุช่องว่างระหว่างคอลัมน์

column-gap คุณสมบัติระบุช่องว่างระหว่างคอลัมน์

ตัวอย่างต่อไปนี้ระบุช่องว่าง 40 พิกเซลระหว่างคอลัมน์:

ตัวอย่าง

div
{
  column-gap: 40px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
}
</style>
</head>
<body>

<h1>Specify the Gap Between Columns</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
</div>

</body>
</html>

กฎคอลัมน์ CSS

column-rule-style คุณสมบัติระบุรูปแบบของกฎระหว่าง คอลัมน์:

ตัวอย่าง

div
{
  column-rule-style: solid;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
}
</style>
</head>
<body>

<h1>Add a Rule Between the Columns</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

column-rule-width คุณสมบัติระบุความกว้างของกฎระหว่างคอลัมน์:

ตัวอย่าง

div
{
  column-rule-width: 1px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 1px;
}
</style>
</head>
<body>

<h1>Set the Rule Width</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

column-rule-color คุณสมบัติระบุสีของกฎระหว่างคอลัมน์:

ตัวอย่าง

div
{
  column-rule-color: lightblue;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: lightblue;
}
</style>
</head>
<body>

<h1>Set the Rule Color</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

column-rule คุณสมบัติเป็นคุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติ column-rule-* ทั้งหมดข้างต้น

ตัวอย่างต่อไปนี้กำหนดความกว้าง สไตล์ และสีของกฎระหว่างคอลัมน์:

ตัวอย่าง

div
{
  column-rule: 1px solid lightblue;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}
</style>
</head>
<body>

<h1>Use the column-rule Shorthand Property</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

ระบุจำนวนคอลัมน์ที่องค์ประกอบควรขยาย

column-span คุณสมบัติระบุจำนวนคอลัมน์ที่องค์ประกอบควรครอบคลุม

ตัวอย่างต่อไปนี้ระบุว่า <h2> องค์ประกอบควรครอบคลุมทุกคอลัมน์:

ตัวอย่าง

h2 {
  column-span: all;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}

h2 {
  column-span: all;
}
</style>
</head>
<body>

<div class="newspaper">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

ระบุความกว้างของคอลัมน์

คุณสมบัติ column-width ระบุความกว้างที่เหมาะสมที่สุดที่แนะนำสำหรับคอลัมน์

ตัวอย่างต่อไปนี้ระบุว่าแนะนำความกว้างที่เหมาะสมที่สุดสำหรับคอลัมน์ ควรเป็น 100px:

ตัวอย่าง

div {
  column-width: 100px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  column-width: 100px;
}
</style>
</head>
<body>

<h1>Specify The Column Width</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

คุณสมบัติ CSS หลายคอลัมน์

ตารางต่อไปนี้แสดงรายการคุณสมบัติหลายคอลัมน์ทั้งหมด:

column-count: ระบุจำนวนคอลัมน์ที่ควรแบ่งองค์ประกอบ
column-fill: ระบุวิธีการเติมคอลัมน์
column-gap: ระบุช่องว่างระหว่างคอลัมน์
column-rule: คุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติ column-rule-* ทั้งหมด
column-rule-color: ระบุสีของกฎระหว่างคอลัมน์
column-rule-style: ระบุรูปแบบของกฎระหว่างคอลัมน์
column-rule-width: ระบุความกว้างของกฎระหว่างคอลัมน์
column-span: ระบุจำนวนคอลัมน์ที่องค์ประกอบควรครอบคลุม
column-width: ระบุความกว้างที่เหมาะสมที่สุดที่แนะนำสำหรับคอลัมน์
columns: คุณสมบัติชวเลขสำหรับการตั้งค่าความกว้างของคอลัมน์และจำนวนคอลัมน์