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

Analysieren Sie vier gängige Methoden und Prinzipien: Floating, Floating Embedded Div, Positionierung und Flex.

schweben

<style type="text/css">
    .wrap {Hintergrund: #eee; Polsterung: 20px; }
    p {Rand: 0; }
    .left {Breite: 200px; Höhe: 200px; Float: links; Hintergrund: Koralle; }
    .rechts {Breite: 200px; Höhe: 200px; Float: rechts; Hintergrund: hellblau; }
    .middle {margin: 0 200px; background: hellrosa; }
</Stil>

<div Klasse="wrap">
    <p class="left">Ich bin links</p>
    <p class="right">Ich bin rechts</p>
    <p class="middle">Ich war der Letzte in der Schlange, aber ich bin in die Mitte gerannt</p>
</div>

Prinzip:

Schwebende und nicht schwebende Elemente befinden sich nicht im selben dreidimensionalen Raum. Wenn das schwebende Element nicht klar ist, schwebt das darunter liegende Element nach oben.
Die Höhe des schwebenden Elements beträgt 0. Die Ebene der schwebenden Box ist höher als block und niedriger als die horizontale inline/inline-block -Box.

Schwebendes Inline-Div

<style type="text/css">
    .wrap {Hintergrund: #eee; Polsterung: 20px; }
    p {Rand: 0; }
    .left {Breite: 200px; Höhe: 200px; Float: links; Hintergrund: Koralle; Rand links: -100 %;}
    .rechts {Breite: 200px; Höhe: 200px; Float: links; Hintergrund: hellblau; Rand links: -200px;}
    .middle {Breite: 100%; Höhe: 200px; Float: links; Hintergrund: hellrosa; }
    Spanne{
        Anzeige: Inline-Block;
        Rand: 0 200 px;
    }
</Stil>

<div Klasse="wrap">
    <p Klasse="Mitte">
        <span class="inner">
            Ich bin mittendrin 
    </p>
    <p class="left">Ich bin links</p>
    <p class="right">Ich bin rechts</p>
</div>

Prinzip:

Alle drei Elemente sind schwebend, wobei das Designelement 100 % einer Zeile ausfüllt und negative margin verwendet werden, um die Elemente links und rechts zu platzieren.
Fügen Sie innerhalb des Designelements ein weiteres untergeordnetes Element mit margin: 0 200px hinzu, um zu verhindern, dass der Inhalt von den beiden schwebenden Elementen links und rechts verdeckt wird.

Position

<style type="text/css">
    .wrap {Hintergrund: #eee; Position: relativ;}
    p {Rand: 0; }
    .left {Breite: 200px; Höhe: 200px; Hintergrund: Koralle; Position: absolut;links: 0; oben: 0;}
    .right {Breite: 200px; Höhe: 200px; Hintergrund: hellblau; Position: absolut; rechts: 0; oben: 0;}
    .middle {Höhe: 200px; Hintergrund: hellrosa; Rand: 0 200px;}
</Stil>

<div Klasse="wrap">
    <p class="middle">Ich bin in der Mitte und verwende den Rand, um den von den beiden links und rechts positionierten Elementen eingenommenen Platz auszugleichen.</p>
    <p class="left">Ich bin links, ich bin ein positioniertes Element</p>
    <p class="right">Ich bin rechts, ich bin ein positioniertes Element</p>
</div>

Prinzip:

Die linken und rechten Elemente können beliebig positioniert werden.
Das mittlere Element verwendet margin: 0 200px um zu verhindern, dass der Inhalt unter die beiden links und rechts positionierten Elemente läuft und verdeckt wird.

biegen

<style type="text/css">
    .wrap {Hintergrund: #eee; Anzeige: flex}
    p {Rand: 0; }
    .left {Breite: 200px; Höhe: 200px; Hintergrund: Koralle; }
    .rechts {Breite: 200px; Höhe: 200px; Hintergrund: hellblau; }
    .middle {Höhe: 200px; Hintergrund: hellrosa; Flex: 1;}
</Stil>

<div Klasse="wrap">
    <p class="left">Ich bin links</p>
    <p class="middle">Ich bin in der Mitte, flex:1 nimmt automatisch den restlichen Platz ein</p>
    <p class="right">Ich bin rechts</p>
</div>

Prinzip:

Im flex -Layout werden untergeordnete Elemente standardmäßig horizontal angeordnet.
flex: 0 1 auto -> Standardmäßig folgt der belegte Platz nicht der Ausdehnung des übergeordneten Elements, sondern der Verkleinerung, der ursprünglichen Breite
flex: 1 1 auto -> auto, der belegte Platz folgt dem übergeordneten Element beim Erweitern und Verkleinern und der ursprünglichen Breite
flex: 0 0 auto -> keine, der belegte Platz folgt weder der Ausdehnung des übergeordneten Elements noch der Verkleinerung, der ursprünglichen Breite
flex: 1 1 1 -> auto, der belegte Raum folgt der Ausdehnung des übergeordneten Elements und folgt gleichzeitig der Verkleinerung und füllt automatisch den verbleibenden Raum aus.

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.

<<: Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden

>>: 202 kostenlose, hochwertige XHTML-Vorlagen (2)