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

<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> 

<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> 

<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> 

<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>