4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen

1. Float + Überlauf: versteckt

Diese Methode löst BFC hauptsächlich durch Überlauf aus und BFC überlappt keine schwebenden Elemente. Da das Festlegen von „overflow:hidden“ die Eigenschaft „haslayout“ des IE6-Browsers nicht auslöst, müssen Sie „zoom:1“ festlegen, um mit dem IE6-Browser kompatibel zu sein. Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Dokument</title>
  <Stil>
    .übergeordnet {
      Rand: 0 auto; // Den übergeordneten Container horizontal zentrieren overflow: hidden;
      Zoom: 1;
      maximale Breite: 1000px;
    }
    .links {
      schweben: links;
      Rand rechts: 20px;
      Breite: 200px;
      Hintergrundfarbe: grün;
    }

    .Rechts {
      Überlauf: versteckt;
      Zoom: 1;
      Hintergrundfarbe: gelb;
    }
  </Stil>
</Kopf>
<Text>
  <div Klasse="übergeordnet"> 
    <div Klasse="links"> 
    <p>links links links links</p> 
    </div> 
    <div Klasse="rechts"> 
    <p>richtig</p> 
    <p>richtig</p> 
    </div> 
  </div> 
</body>
</html>

2. float: links + Rand links

Float sorgt dafür, dass das Element links aus dem Dokumentfluss herausragt und das Element rechts in derselben Zeile wie das Element links angezeigt werden kann. Stellen Sie margin-left so ein, dass das Element rechts das Element links nicht überdeckt. Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Dokument</title>
  <Stil>
    .übergeordnet {
      Rand: 0 automatisch;
      maximale Breite: 1000px;
    }
    .parent::nach {
      Inhalt: '';
      Anzeige: Tabelle;
      klar: beides;
    }
    .links {
      schweben: links;
      Breite: 200px;
      Hintergrundfarbe: grün;
    }

    .Rechts {
      Rand links: 200px;
      Hintergrundfarbe: gelb;
    }
  </Stil>
</Kopf>
<Text>
  <div Klasse="übergeordnet"> 
    <div Klasse="links"> 
    <p>links links links links</p> 
    </div> 
    <div Klasse="rechts"> 
    <p>richtig</p> 
    <p>richtig</p>
    <p>richtig</p> 
    </div> 
   </div> 
</body>
</html>

3. Position: absolut + Rand links

Absolute Positionierung links und Setzen des linken Rands rechts, der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Dokument</title>
  <Stil>
    .übergeordnet {
      Position: relativ;
      Rand: 0 automatisch;
      maximale Breite: 1000px;
    }

    .links {
      Position: absolut;
      Breite: 200px;
      Hintergrundfarbe: grün;
    }

    .Rechts {
      Rand links: 200px;
      Hintergrundfarbe: gelb;
    }
  </Stil>
</Kopf>
<Text>
  <div Klasse="übergeordnet"> 
    <div Klasse="links"> 
    <p>links links links links</p> 
    </div> 
    <div Klasse="rechts"> 
    <p>richtig</p> 
    <p>richtig</p>
    <p>richtig</p> 
    </div> 
   </div> 
</body>
</html>

4. Flexibles Layout

Durch das flexible Layout können zwei untergeordnete Elemente in derselben Zeile angezeigt werden. Solange die Breite links festgelegt ist, kann der Effekt erzielt werden. Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Dokument</title>
  <Stil>
    .übergeordnet {
      Anzeige: Flex;
      Rand: 0 automatisch;
      maximale Breite: 1000px;
    }
    .links {
      Breite: 200px;
      Hintergrundfarbe: grün;
    }

    .Rechts {
      Rand links: 20px;
      biegen: 1;
      Hintergrundfarbe: gelb;
    }
  </Stil>
</Kopf>

<Text>
  <div Klasse="übergeordnet">
    <div Klasse="links">
      <p>links links links links</p>
    </div>
    <div Klasse="rechts">
      <p>richtig</p>
      <p>richtig</p>
      <p>richtig</p>
    </div>
  </div>
</body>
</html>

Damit ist dieser Artikel über 4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit einer festen linken und einer adaptiven rechten Seite zu erreichen, abgeschlossen. Weitere Informationen zum Erreichen eines zweispaltigen Layouts mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Zabbix überwacht die Konfiguration der Docker-Anwendung

>>: Vergleich der Verwendung von Formularelementattributen schreibgeschützt und deaktiviert

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.18 winx64

4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.18 winx64

So installieren Sie JDK und legen Umgebungsvariablen in Linux fest (dieser Artikel reicht aus)

Der gesamte Prozessdatensatz der rekursiven Komponentenkapselung von Vue3

Vue implementiert eine einfache bidirektionale Datenbindung

Erläuterung zum Lastenausgleich und Reverseproxy von Nginx

MySQL Slow Query-Optimierung: Die Vorteile von Limit aus Theorie und Praxis

Detaillierte Erklärung des Vue2 Cube-UI-Zeitwählers

Schritte zum Erstellen eines Docker-Images mit Dockerfile

Detaillierte Erläuterung des Prozesses der Verwendung von GPU in Docker

Die Magie des tr-Befehls beim Zählen der Häufigkeit englischer Wörter

Artikel empfehlen

MySQL-Dateneinfügungsoptimierungsmethode concurrent_insert

So verwenden Sie xshell zum Herstellen einer Verbindung zu Linux in VMware (2 Methoden)

Erweiterte Erklärung der Javascript-Funktionen

So ändern Sie das MySQL-Tabellenpartitionierungsprogramm

So implementieren Sie die Eingabeaufforderung für das H5-Eingabefeld + die Eingabeaufforderung für das normale Textfeld

Lösung für Fremdschlüsselfehler bei der MySQL-Tabellenerstellung

Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse

Führen Sie die folgenden Schritte aus, um die Anmeldung durch Gesichtserkennung in Ubuntu zu implementieren

So implementieren Sie das Singleton-Muster in Javascript

Eine vollständige Liste häufig verwendeter MySQL-Funktionen (klassifiziert und zusammengefasst)

Einführung in die wichtigsten Browser und ihre Kernel

Kennen Sie die Bedeutung von Sonderzeichen in URLs?

Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage

So verwenden Sie cutecom für die serielle Kommunikation in einer virtuellen Ubuntu-Maschine

WeChat-Applet-Canvas implementiert Signaturfunktion