Beispiel für die Umsetzung eines 2-spaltigen Layouts in HTML (links feste Breite, rechts adaptive Breite)

HTML implementiert ein 2-spaltiges Layout mit fester Breite links und adaptiver Breite rechts

Implementierung 1:

<Stil>
    Textkörper, html{padding:0; margin:0;}
    //Verwende gemäß der CSS-Positionierung eine schwebende oder absolute Positionierung, damit das Blockelement auf der linken Seite aus dem normalen Dokumentfluss herausragt und neben dem Blockelement auf der rechten Seite platziert werden kann. div:nth-of-type(1){
        float: left; //Float verwenden// postion: absolute; //Absolute Positionierung verwenden// top: 0;
        // links: 0;
        Breite: 300px;
        Höhe: 200px;
        Hintergrund: rot;
    }
    // [Elemente auf Blockebene füllen standardmäßig automatisch die Breite des übergeordneten Elements und belegen eine Zeile]
    //Derzeit: Breite des rechten Blockelements = Breite des übergeordneten Elements div:nth-of-type(2){
        // Setzen Sie den linken Rand auf die Breite des linken Blockelements.
        Rand links: 300px;
        // Jetzt: die Breite des rechten Blockelements = Breite des übergeordneten Elements - linker Rand
        Höhe: 220px;
        Hintergrund: blau;
    }
</Stil>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

1) Vor dem Setzen des linken Rands

2) Nach dem Setzen des linken Rands

Implementierung 2:

<Stil>
    Textkörper, html{padding:0; margin:0;}
    //Verwende gemäß der CSS-Positionierung eine schwebende oder absolute Positionierung, um das Blockelement links aus dem normalen Dokumentfluss herauszuheben div:nth-of-type(1){
        float: left; //Float verwenden// postion: absolute; //Absolute Positionierung verwenden// top: 0;
        // links: 0;
        Breite: 300px;
        Höhe: 200px;
        Hintergrund: rot;
    }
    // FC ist ein normaler (regulärer) Dokumentfluss, ein Formatierungskontext, ein Rendering-Bereich auf der Seite und verfügt über eine Reihe von Rendering-Spezifikationen. BFC ist ein Blockformatierungskontext.
    // Verwenden Sie den BFC-Formatierungskontext auf Blockebene, um einen isolierten, unabhängigen Container zu erstellen div:nth-of-type(2){
        //Ändern Sie den Überlaufwert auf „nicht sichtbar“, wodurch BFC ausgelöst wird.
        Überlauf: versteckt;
        Höhe: 220px;
        Hintergrund: blau;
    }
</Stil>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Ein Beispiel zur Optimierung eines Projekts nach Abschluss des Vue-Projekts

>>: HTML5+CSS3-Codierungsstandards