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

Spezifische Verwendung der ES6-Array-Kopier- und Füllmethoden copyWithin() und fill()

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

Spezifische Verwendung der ES6-Array-Kopier- und Füllmethoden copyWithin() und fill()

Eine kurze Diskussion über die Platzierung von Skripten in HTML

So installieren Sie Maven automatisch in der kontinuierlichen Integration von Linux

Beispielcode zur Implementierung eines Waben-/Sechseckatlas mit CSS

Lösung für die lange Verzögerung der MySQL-Datenbank-Master-Slave-Replikation

Lösung für das Problem des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung

Fabric.js implementiert DIY-Postkartenfunktion

In einem Artikel erfahren Sie, wie Sie ein Vue-Plugin schreiben

So konfigurieren Sie MySQL auf einem Ubuntu-Server und implementieren eine Remote-Verbindung

Das mobile Vue-Terminal bestimmt die Richtung, in die der Finger über den Bildschirm gleitet

Artikel empfehlen

So verwenden Sie async und await in JS

Beheben Sie den 1251-Fehler beim Herstellen einer Verbindung zwischen MySQL und Navicat

Detaillierte Erklärung des Unterschieds zwischen Tags und Elementen in HTML

Quellcode der HTML-Einstellungen für die Benutzerregistrierungsseite

So ändern Sie das ursprüngliche Passwort von MySQL auf dem MAC

Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

Vue realisiert den Prozentbalkeneffekt

Detaillierte Erläuterung der Nginx-Strombegrenzungskonfiguration

Drei Möglichkeiten, das horizontale Div-Layout auf beiden Seiten auszurichten

Grafisches Tutorial zur Installation der MySQL 8.0.12-Dekomprimierungsversion unter Windows 10

Detaillierte Erklärung des Problems mit verstümmelten chinesischen Schriftzeichen in der MySQL-Datenbank

Tutorial zum Erstellen des File-Sharing-Dienstes Samba unter CentOS6.5

Zusammenfassung der bei der Arbeit häufig verwendeten Linux-Befehle

Vue realisiert Web-Online-Chat-Funktion

Schreiben eines Schere-Stein-Papier-Spiels in JavaScript