CSS több oszlop

Tartalomjegyzék

CSS többoszlopos elrendezés

A CSS többoszlopos elrendezése lehetővé teszi több oszlopos szöveg egyszerű meghatározását - akárcsak az újságokban:

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 többoszlopos tulajdonságok

Ebben a fejezetben a következő többoszlopos tulajdonságokat ismerheti meg:

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

Böngésző támogatás

A táblázatban szereplő számok az első böngészőverziót adják meg, amely teljes mértékben támogatja a tulajdonságot.

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 Több oszlop létrehozása

Az column-count tulajdonság megadja, hogy egy elem hány oszlopot tartalmazzon részre kell osztani.

A következő példa a <div> elemben lévő szöveget 3-ra osztja oszlopok:

Példa

div
{
  column-count: 3;
}

Próbálja ki Ön is →

<!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 Adja meg az oszlopok közötti rést

Az column-gap tulajdonság az oszlopok közötti rést határozza meg.

A következő példa 40 pixel távolságot határoz meg az oszlopok között:

Példa

div
{
  column-gap: 40px;
}

Próbálja ki Ön is →

<!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 oszlopszabályok

A column-rule-style tulajdonság megadja a szabály stílusát oszlopok:

Példa

div
{
  column-rule-style: solid;
}

Próbálja ki Ön is →

<!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>

A column-rule-width tulajdonság megadja a szabály oszlopok közötti szélességét:

Példa

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

Próbálja ki Ön is →

<!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>

A column-rule-color tulajdonság az oszlopok közötti szabály színét adja meg:

Példa

div
{
  column-rule-color: lightblue;
}

Próbálja ki Ön is →

<!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>

Az oszlop-szabály tulajdonság egy rövidített tulajdonság az összes fenti oszlop-szabály-* tulajdonság beállításához.

A következő példa az oszlopok közötti szabály szélességét, stílusát és színét állítja be:

Példa

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

Próbálja ki Ön is →

<!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>

Adja meg, hogy egy elem hány oszlopot íveljen át

Az column-span tulajdonság megadja, hogy egy elem hány oszlopot íveljen át.

A következő példa azt határozza meg, hogy a <h2> elemnek át kell terjednie az összes oszlopon:

Példa

h2 {
  column-span: all;
}

Próbálja ki Ön is →

<!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>

Adja meg az oszlop szélességét

Az oszlopszélesség tulajdonság az oszlopok javasolt, optimális szélességét határozza meg.

A következő példa megadja az oszlopok javasolt, optimális szélességét 100 képpontnak kell lennie:

Példa

div {
  column-width: 100px;
}

Próbálja ki Ön is →

<!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 többoszlopos tulajdonságok

Az alábbi táblázat felsorolja az összes többoszlopos tulajdonságot:

column-count: Megadja, hány oszlopra kell egy elemet felosztani
column-fill: Meghatározza az oszlopok kitöltésének módját
column-gap: Megadja az oszlopok közötti távolságot
column-rule: Egy rövidített tulajdonság az összes oszlop-szabály-* tulajdonság beállításához
column-rule-color: Megadja az oszlopok közötti szabály színét
column-rule-style: Megadja az oszlopok közötti szabály stílusát
column-rule-width: Megadja az oszlopok közötti szabály szélességét
column-span: Meghatározza, hogy egy elem hány oszlopot íveljen át
column-width: Meghatározza az oszlopok javasolt, optimális szélességét
columns: Gyorsírási tulajdonság az oszlopszélesség és az oszlopszám beállításához