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

Javascript realisiert 10-Sekunden-Countdown zur Bezahlung

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

Javascript realisiert 10-Sekunden-Countdown zur Bezahlung

So verfolgen Sie Benutzer mit JS

Reines CSS und Flutter realisieren jeweils einen atmenden Lichteffekt (Beispielcode)

So implementieren Sie einen variablen Ausdrucksselektor in Vue

Vue3 + TypeScript-Entwicklungszusammenfassung

Beispielmethode zum Anzeigen der mit MySQL verbundenen IP-Adresse

Studiennotizen zur MySQL Master-Slave-Konfiguration

Die 13 am häufigsten in Interviews gestellten Fragen zu Vue-Modifikatoren

CSS wählt das erste untergeordnete Element unter dem übergeordneten Element aus (:first-child)

Reagieren Sie Homepage langsames Laden Problem Leistungsoptimierung Fall detaillierte Erklärung

Artikel empfehlen

6 Möglichkeiten, die Maximal- und Minimalwerte eines Arrays in Javascript zu implementieren

Detaillierte Erläuterung der drei Möglichkeiten zum Konfigurieren virtueller Nginx-Hosts (basierend auf Ports)

Detaillierte Erläuterung des MySQL-Indexprinzips und der Abfrageoptimierung

Über das Problem der dynamischen Spleißen der SRC-Bildadresse von img in Vue

Implementierung eines CSS-Festlayouts auf beiden Seiten und eines adaptiven Layouts in der Mitte

So verstecken Sie RAR-Dateien in Bildern

Lösen Sie das Problem des schwarzen Bildschirms, nachdem VMware das Linux-System installiert und gestartet hat

Benutzerdefinierter Bulletbox-Effekt von Vue (Bestätigungsfeld, Eingabeaufforderungsfeld)

So implementieren Sie die Vue-Bindungsklasse und den Inline-Bindungsstil

Detaillierte Erklärung zur Verwendung von Rastereigenschaften in CSS

Ursachen und Lösungen für MySQL-Datenverlust

CentOS7 verwendet yum zur Installation von MySQL 8.0.12

Reines CSS, um die Textsymbolfunktion zu erreichen, indem das erste Zeichen der Zeichenfolge verwendet wird

Vergleich der Effizienz zwischen Einzeltabellenabfrage und Mehrtabellen-Joinabfrage in der MySql-Datenbank

jQuery Canvas generiert ein Poster mit einem QR-Code