Lösung für das Problem der adaptiven Höhe und Breite der CSS-Anzeigetabelle

Definition und Verwendung

Die Anzeigeeigenschaft gibt den Boxtyp an, den ein Element generieren soll.

veranschaulichen

Mit diesem Attribut wird die Art des Anzeigerahmens definiert, den das Element beim Erstellen eines Layouts generiert. Bei Dokumenttypen wie HTML kann die Verwendung der Anzeigefunktion gefährlich sein, wenn man nicht vorsichtig ist, da dadurch die in HTML definierte Anzeigehierarchie verletzt werden kann. Da bei XML keine solche Hierarchie eingebaut ist, ist die gesamte Anzeige absolut notwendig.
Mögliche Werte

Elemente mit Anzeige: Tabellenzellensatz:

• Sensibel auf Breite und Höhe
• Keine Reaktion auf den Margenwert
• Reaktionsfähige Polstereigenschaften
• Wenn der Inhalt überläuft, wird das übergeordnete Element automatisch erweitert

Das oben erzielte Effektbild besteht darin, dass der linke Avatar-Teil das Float-Attribut „left float“ verwendet und die rechte Seite „display: table-cell“ verwendet, um ein zweispaltiges adaptives Layout zu erzielen.

Anzeige: Tabelle; Die äußere Ebene definiert die Breite und Höhe, und der Inhalt im Inneren passt sich der Breite und Höhe an. Wenn das untergeordnete Element ein Div ist, ist die Breite der einzelnen Spalten nicht gleichmäßig aufgeteilt. Daher wird empfohlen, li-Tags für untergeordnete Elemente zu verwenden

.css-Tabelle {
      Anzeige: Tabelle;
      Höhe: 2rem;
      Breite: 5rem;
  }
  .css-Tabelle-bg {
      Anzeige: Tabellenzelle;
      vertikale Ausrichtung: Mitte;
      Textausrichtung: zentriert;
      Hintergrundfarbe: Koralle;
  }
  .css-Tabelle li {
      Anzeige: Tabellenzelle;
      vertikale Ausrichtung: Mitte;
      Textausrichtung: zentriert;
      Hintergrundfarbe: Dunkelkhaki;
  }

    <div Klasse="css-Tabelle">
     <div Klasse="css-table-bg">1</div>
        <div Klasse="css-table-bg">2</div>
        <div Klasse="css-table-bg">3</div>
    </div>
    <div Klasse="css-Tabelle">
        <ul> 
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Über</a></li>
            <li><a href="#">Kunden</a></li>
        </ul>
    </div>

Dies ist das Ende dieses Artikels zur Lösung des Problems der adaptiven Höhe und Breite der CSS-Anzeigetabelle. Weitere relevante Inhalte zur adaptiven CSS-Anzeigetabelle finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!