Beispielcode zur Implementierung eines dreispaltigen Layouts mit CSS, wobei die mittlere Spalte adaptiv ist und ihre Breite mit der Textgröße ändert

Die in Baidu-Interviews gestellten Fragen müssen die folgenden Layouteffekte erzielen

Die Größe der violetten Spalte in der Mitte wird mit der Anzahl der Schriftarten größer/kleiner und der zusätzliche Text wird automatisch weggelassen, da [...]. Die grüne Spalte rechts sollte eng mit der violetten Spalte verbunden sein. Die wichtigsten Operationen für die violette Spalte sind:

1.flex: 0 1 auto (adaptiv)

2.text-overflow:ellipsis; (Text automatisch auslassen)

Überlauf: versteckt;

Leerzeichen: Nowrap;

Der vollständige Code lautet wie folgt

// CSS Teil.Container {
  Anzeige: Flex;
}
.Bild {
  Breite: 100px;
  Höhe: 100px;
  Randradius: 50 %;
  Hintergrundfarbe: rosa;
}
.Name {
  flex:0 1 auto;
  Höhe: 100px;
  Hintergrundfarbe: lila;
  Textüberlauf: Auslassungspunkte;
  Überlauf: versteckt;
  Leerzeichen: Nowrap;
}
.Etikett {
  Breite: 100px;
  Höhe: 100px;
  Textausrichtung: zentriert;
  Zeilenhöhe: 100px;
  Hintergrundfarbe: seegrün;
}

// HTML-Teil <div class="container">
    <div Klasse="Bild"></div>
    <div Klasse="Name">
        Abonnieren
    </div>
    <div class="tag">Designer</div>
</div>

Zusammenfassen

Damit ist dieser Artikel über die Verwendung von CSS zur Implementierung eines dreispaltigen Layouts mit adaptiver mittlerer Spalte und sich mit der Textgröße ändernder Breite abgeschlossen. Weitere relevante Inhalte zum dreispaltigen CSS-Layout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!