Testen Sie Ihre Fähigkeiten: Multicol

Ziel dieses Tests ist es, zu beurteilen, ob Sie das CSS Mehrspalten-Layout verstehen, einschließlich der Eigenschaften und Werte von column-count, column-width, column-gap, column-span und column-rule. Sie werden durch drei kleine Aufgaben arbeiten, die unterschiedliche Elemente des Materials verwenden, das Sie gerade behandelt haben.

Hinweis: Klicken Sie auf "Play" in den untenstehenden Code-Blöcken, 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 erstellen, mit einem Abstand von 50px zwischen jeder Spalte.

Ihr Endergebnis sollte wie das folgende Bild 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 Platz zwischen dem Rand der Linie und dem Spalteninhalt gibt.

Ihr Endergebnis sollte wie das folgende Bild 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 Langschreibweise column-rule-* Eigenschaft anstelle der Kurzform verwenden, obwohl dies keinen Vorteil bietet. Der Schlüssel zur Verwendung von column-gap ist, dass Sie verstanden haben, dass die Linie den Spalt nicht um 5px vergrößert. 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 Sie das Element, das die Überschrift und die Unterüberschrift enthält, über alle Spalten spannen lassen, sodass es wie im folgenden Bild aussieht:

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

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 der 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, um zu überprüfen, ob Sie das richtige Element auswählen.

css
.box {
  column-span: all;
}

Siehe auch