Testen Sie Ihre Fähigkeiten: Multicol

Das Ziel dieses Fähigkeitstests ist es, zu bewerten, ob Sie das CSS-Multicolumn-Layout verstehen, einschließlich der Eigenschaften und Werte von column-count, column-width, column-gap, column-span und column-rule. Sie werden drei kleine Aufgaben durcharbeiten, die verschiedene Elemente des gerade behandelten Materials nutzen.

Hinweis: Klicken Sie unten in den Codeblöcken auf "Play", um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Clipboard-Symbol) und in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.

Aufgabe 1

In dieser Aufgabe möchten wir, dass Sie drei Spalten mit einem Abstand von 50px zwischen jeder Spalte erstellen.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Drei Textspalten

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

html
<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>

  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green
    bean swiss chard seakale pumpkin onion chickpea gram corn pea.
  </p>
</div>
css
body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
}
Klicken Sie hier, um die Lösung anzuzeigen

Für diese Aufgabe müssen Sie column-count und column-gap verwenden:

css
.container {
  column-count: 3;
  column-gap: 50px;
}

Aufgabe 2

In dieser Aufgabe möchten wir, dass Sie Spalten erstellen, die eine Mindestbreite von 200px haben. Fügen Sie dann eine 5px graue Linie zwischen jeder Spalte hinzu und stellen Sie sicher, dass es 10px Abstand zwischen der Kante der Linie und dem Spalteninhalt gibt.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Drei Textspalten mit einer grauen Linie dazwischen.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

html
<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>

  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green
    bean swiss chard seakale pumpkin onion chickpea gram corn pea.
  </p>
</div>
css
body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
}
Klicken Sie hier, um die Lösung anzuzeigen

Sie müssen die Eigenschaften column-width und column-rule verwenden. Sie könnten die longhand column-rule-* Eigenschaften anstelle der Kurzform verwenden, obwohl dies keinen Vorteil bietet. Das Wichtige bei der Verwendung von column-gap ist, dass Sie verstanden haben, dass die Linie nicht 5px Platz zum Abstand hinzufügt. Um auf beiden Seiten der Linie 10px zu haben, benötigen sie einen 25px Abstand, da die Linie darüber gelegt wird.

css
.container {
  column-width: 200px;
  column-rule: 5px solid #ccc;
  column-gap: 25px;
}

Aufgabe 3

In dieser Aufgabe möchten wir, dass das Element, das die Überschrift und Unterüberschrift enthält, über alle Spalten hinweg reicht, sodass es wie das Bild unten aussieht:

Drei Textspalten mit einer Überschrift und Unterüberschrift, die alle drei in der Mitte überspannen.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

html
<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <div class="box">
    <h2>I am a level 2 heading</h2>
    <div class="subhead">Lotus root water spinach fennel</div>
  </div>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green
    bean swiss chard seakale pumpkin onion chickpea gram corn pea.
  </p>
</div>
css
.container {
  column-count: 3;
}

.box {
}

h2 {
}
Klicken Sie hier, um die Lösung anzuzeigen

In dieser Aufgabe testen wir das Verständnis für die Eigenschaft column-span. Alles, was Sie tun müssen, ist, das Element mit der Klasse .box auf column-span: all zu setzen. Dies ist größtenteils eine Aufgabe, bei der überprüft wird, dass Sie das richtige Element auswählen.

css
.box {
  column-span: all;
}

Siehe auch