Wie entwerfe ich das Layout mit vier Spalten nur mit CSS, wenn die Spaltenbreiten variabel sind?

Question

Ich möchte ein vierspaltiges Layout mit CSS nur dort, wo die Breite der Spalten reagiert. Um mein Problem zuerst zu verstehen, schauen Sie sich bitte den folgenden Code an:

.row {
  width: 100%;
  display: table;
}

.col {
  display: table-cell;
  width: 25%;
}

.col1 {
  background-color: #89ffa2;
}

.col2 {
  background-color: #b2f0f9;
}

.col3 {
  background-color: #ffa7a7;
}

.col4 {
  background-color: #fff689;
}

<div class="row">
  <div class="col col1">
    This is column 1
  </div>

  <div class="col col2">
    This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
  </div>

  <div class="col col3">
    This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
  </div>

  <div class="col col4">
    This is column 4.
  </div>
</div>

Im obigen Code wird die Breite mit 25% angegeben, sodass sie für alle Spalten als gleiche Breite fungiert. Aber ich will diese 25% nicht. Was ich erreichen möchte, ist, dass Spalte 1 und Spalte 4 in diesem Fall ziemlich kleiner sind, sodass Spalte 1 und Spalte 4 die Größe der Breite ihres Inhalts haben. Da alle anderen Spalten die Größe von 25% überschreiten, sind sie gleich breit. Außerdem entspricht die Höhe aller 4 Spalten der Höhe der Spalte mit maximaler Höhe. Und ich möchte, dass dies reagiert, wenn beispielsweise die Bildschirmgröße kleiner ist, müssen an einigen Stellen alle 4 Spalten dieselbe Breite haben. Und die Spalten 1 und 4 sind in diesem Fall Dummy. Ich möchte, dass es dynamisch ist, weil der Inhalt einer Spalte größer und welcher kleiner ist, was nicht bekannt ist.

Ich möchte, dass es so aussieht:

enter image description here

Und wenn die Größe des Bildschirms geändert wird, kann dies folgendermaßen aussehen:

enter image description here

Ist das nur mit CSS möglich? Vielleicht könnte ich mich klar machen.

html css

0

user9658546 18 Apr. 2018 im 16:00

Answer 1

Sie können einfach die Breite löschen, dann werden die Zellenbreiten entsprechend ihrem Inhalt angepasst.

Und wenn Sie möchten, dass der Text in Spalte 1 und 4 nicht unterbrochen wird, können Sie white-space: no-wrap hinzufügen

.row {
  width: 100%;
  display: table;
}

.col {
  display: table-cell;
}

.col1 {
  background-color: #89ffa2;
  white-space: nowrap;
}

.col2 {
  background-color: #b2f0f9;
}

.col3 {
  background-color: #ffa7a7;
}

.col4 {
  background-color: #fff689;
  white-space: nowrap;
}

<div class="row">
  <div class="col col1">
    This is column 1
  </div>

  <div class="col col2">
    This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
  </div>

  <div class="col col3">
    This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
  </div>

  <div class="col col4">
    This is column 4.
  </div>
</div>

1

Johannes 18 Apr. 2018 im 14:26

Answer 2

Es gibt ein gutes altes HTML-Element namens <table>

Sie können eine Tabelle mit einer Zeile und 4 Spalten erstellen und eine Breite von 100% festlegen.

Formatieren Sie es jetzt nach Ihren Wünschen und die Breite für Zellen mit mehr Text wird automatisch angepasst.

Ich denke, Flexbox ist eine andere Lösung, aber Tabelle wird in allen Browsern unterstützt

2

NoOorZ24 18 Apr. 2018 im 13:09

Answer 3

Verwenden Sie max-width mit Flexbox. Hier ist ein Beispiel:

.row {
  width: 100%;
  display: flex;
}
.row > .col {
  max-width:25%;
}

.col1 {
  background-color: #89ffa2;
}

.col2 {
  background-color: #b2f0f9;
}

.col3 {
  background-color: #ffa7a7;
}

.col4 {
  background-color: #fff689;
}

<div class="row">
  <div class="col col1">
    This is column 1
  </div>

  <div class="col col2">
    This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
  </div>

  <div class="col col3">
    This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
  </div>

  <div class="col col4">
    This is column 4.
  </div>
</div>

1

Temani Afif 18 Apr. 2018 im 13:14

Answer 4

.row {
  width: 100%;
  display: table;
}

.col {
  display: table-cell;
}

.col1 {
  background-color: #89ffa2;
  width: 15%;
}

.col2 {
  background-color: #b2f0f9;
  width: 35%;
}

.col3 {
  background-color: #ffa7a7;
  width: 35%;
}

.col4 {
  background-color: #fff689;
  width: 15%;
}

@media screen and (max-width: 768px) {
   .col {
      display: table-cell;
      width: 25%;
    }
}

<div class="row">
  <div class="col col1">
    This is column 1
  </div>

  <div class="col col2">
    This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
  </div>

  <div class="col col3">
    This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
  </div>

  <div class="col col4">
    This is column 4.
  </div>
</div>

1

user12313780 18 Apr. 2018 im 14:02

Wie entwerfe ich das Layout mit vier Spalten nur mit CSS, wenn die Spaltenbreiten variabel sind?

4 Antworten

Verwandte Fragen

Neue Fragen

html