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

So erstellen Sie mit Squid einen Proxyserver für http und https

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

So erstellen Sie mit Squid einen Proxyserver für http und https

Detaillierte Erklärung zur Begrenzung des Update-/Löschbereichs mit dem MySQL-Parameter sql_safe_updates

vue realisiert die Anpassung der Spaltenbreite von el-table perfekt

So richten Sie die passwortfreie SSH-Anmeldung beim Linux-Server ein

Vue implementiert eine Zeit-Countdown-Funktion

Vue verwendet Plug-Ins, um Bilder proportional zuzuschneiden

Reines CSS, um den Listen-Pulldown-Effekt auf der Seite zu erzielen

So fügen Sie einem Benutzer in einer Linux-Umgebung Sudo-Berechtigungen hinzu

CSS3-Radarscan-Kartenbeispielcode

So beheben Sie die durch MySQL DDL verursachte Synchronisierungsverzögerung

Artikel empfehlen

Auszeichnungssprachen – Was lernen, nachdem man HTML gelernt hat?

Wie man die Idee von Vue nutzt, um einen Speicher zu kapseln

Tutorial und Praxis zu den virtuellen Speichereinstellungen unter Linux

Detaillierte Schritte zur Installation von Nginx auf dem Apple M1-Chip und zum Bereitstellen eines Vue-Projekts

jQuery implementiert das Bouncing-Ball-Spiel

mysql erhält statistische Daten innerhalb eines bestimmten Zeitraums

Einführung in die Vue3 Composition API

Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)

5 Möglichkeiten, um schnell den Leerraum eines Inline-Blocks in HTML zu entfernen

So installieren Sie JDK 13 in einer Linux-Umgebung mithilfe eines komprimierten Pakets

Eine kurze Diskussion darüber, wie man schöne bedingte Ausdrücke in JS schreibt

Javascript, um den Effekt des Schließens von Anzeigen zu erzielen

Analyse und Praxis des serverseitigen Rendering-Prinzips von React

Detaillierte Erklärung von 7 SSH-Befehlsverwendungen in Linux, die Sie nicht kennen

Detaillierte Schritte zum Konfigurieren virtueller Hosts in nginx