Webseiten-Spalte

Was ist eine Webseiten-Spalte?

Die Webseiten-Spalte ist ein Homepageelement.

Wie kann man Webseiten-Spalten machen?

Man braucht CSS für 3 Spalten:

@media screen: Beim Smartphone gilt das nicht.

.content-box {columns: 3 auto;}
@media screen and (max-width: 767px){.content-box {columns: 1 auto;}}

Man braucht den Code für die Spalten

<p class="content-box">
  Dieser Text wird in drei Spalten aufgeteilt. Man verwendet dafür CSS mit content-box und gibt die Anzahl der Spalten columns mit 3 an. Die Einstellung erfolgt automatisch je nach Browserfenster. Im Smartphone ist es aber nur eine Spalte.
</p>

Dieser Text wird in drei Spalten aufgeteilt. Man verwendet dafür CSS mit content-box und gibt die Anzahl der Spalten columns mit 3 an. Die Einstellung erfolgt automatisch je nach Browserfenster. Im Smartphone ist es aber nur eine Spalte.

---

Man kann auch statt des Textes Bilder nehmen:

---

Wie kann man gleichhohe Spalten machen?

Man braucht CSS:

.col-container {
  display: table; /* Make the container element behave like a table */
  width: 100%; /* Set full-width to expand the whole page */
}
.col {
  display: table-cell;padding: 15px;flex-wrap: wrap;width: 30%; /* Make elements inside the container behave like table cells */
}

Man braucht den Code für die Stelle, wo das Bild hin soll:

<div class="col-container">
<div class="col" style="background:yellow">
<h2>Spalte 1</h2>
<li>Hallo</li>
</div>

<div class="col" style="background:#87ceeb">
<h2>Spalte 2</h2>
<li>Hallo</li>
<li>Hallo</li>
<li>Hallo</li>
<li>Hello World!</li>
</div>

<div class="col" style="background:orange">
<h2>Spalte 3</h2>
<li>hier etwas Text.</li>
<li>hier noch mehr Text.</li>
</div>
</div> 

Wofür kann man Webseiten-Spalten verwenden?

Homepage gliedern.