Detaillierte Erläuterung von 5 Lösungen für das adaptive CSS-Layout für Fortgeschrittene

<Abschnittsklasse = "Layout Float">
         <Stil>
             .layout.float .links-rechts-mitte{
                 Höhe: 100px;
             }
             .layout.float .links{
                 schweben: links;
                 Breite: 300px;
                 Hintergrundfarbe: rot;
             }

             .layout.float .rechts{
                 schweben: rechts;
                 Breite: 300px;
                 Hintergrundfarbe: blau;
             }

             .layout.float .center{
                 Hintergrundfarbe: gelb;
             }
         </Stil>
         <Artikelklasse="links-rechts-mitte">
             <div Klasse="links"></div>
             <div Klasse="rechts"></div>
             <div class="center">Ich bin das adaptive Element in der Mitte – schwebend</div>
         </Artikel>
     </Abschnitt>

<Abschnitt Klasse="layout absolut">
         <Stil>
             .layout.absolute .links-mitte-rechts div{
                 Position: absolut;
                 Höhe: 100px;
             }

             .layout.absolute .left{
                 links: 0;
                 Breite: 300px;
                 Hintergrundfarbe: rot;
             }

             .layout.absolute .center{
                 links: 300px;
                 rechts: 300px;
                 Hintergrundfarbe: gelb;
             }

             .layout.absolute .right{
                 rechts: 0;
                 Breite: 300px;
                 Hintergrundfarbe: blau;
             }
         </Stil>
         <Artikelklasse="links-mitte-rechts">
            <div Klasse="links"></div>
            <div Klasse="Mitte">
                Ich bin das adaptive Element in der Mitte - absolute Positionierung</div>
            <div Klasse="rechts"></div>
         </Artikel>
     </Abschnitt>

<Abschnitt Klasse="Layout Flex">
         <Stil>
             .layout.flex .links-mitte-rechts{
                 Anzeige: Flex;
                 Höhe: 100px;
             }

             .layout.flex .left{
                 Breite: 300px;
                 Hintergrundfarbe: rot;
             }

             .layout.flex .center{
                 biegen: 1;
                 Hintergrundfarbe: gelb;
             }

             .layout.flex .right{
                 Breite: 300px;
                 Hintergrundfarbe: blau;
             }
         </Stil>
         <Artikelklasse="links-mitte-rechts">
            <div Klasse="links"></div>
            <div Klasse="Mitte">
                Ich bin das adaptive Element in der Mitte - Flex-Layout</div>
            <div Klasse="rechts"></div>
         </Artikel>
     </Abschnitt>

   <Abschnitt Klasse="Layouttabelle">
        <Stil>
            .layout.tabelle .links-mitte-rechts{
                Anzeige: Tabelle;
                Höhe: 100px;
                Breite: 100 %;
            }

            .layout.tabelle .links{
                Anzeige: Tabellenzelle;
                Breite: 300px;
                Hintergrundfarbe: rot;
            }

            .layout.tabelle .center{
                Anzeige: Tabellenzelle;
                Hintergrundfarbe: gelb;
            }

            .layout.tabelle .rechts{
                Anzeige: Tabellenzelle;
                Breite: 300px;
                Hintergrundfarbe: blau;
            }
        </Stil>
        <Artikelklasse="links-mitte-rechts">
            <div Klasse="links"></div>
            <div Klasse="Mitte">
                Ich bin das adaptive Element in der Mitte - Tisch
            </div>
            <div Klasse="rechts"></div>
        </Artikel>
    </Abschnitt>

<Abschnitt Klasse="Layoutraster">
        <Stil>
            .layout.grid .links-mitte-rechts{
                Anzeige: Raster;
                Breite: 100 %;
                grid-template-rows: 100px;/*Jedes Raster ist 100px hoch*/
                grid-template-columns: 300px auto 300px;/*Das linke und das rechte Raster sind beide 300px groß und das mittlere ist adaptiv*/
            }
            
            .layout.raster .links{
                Hintergrundfarbe: rot;
            }

            .layout.raster .center{
                Hintergrundfarbe: gelb;
            }

            .layout.grid .rechts{
                Hintergrundfarbe: blau;
            }
        </Stil>
        <Artikelklasse="links-mitte-rechts">
            <div Klasse="links"></div>
            <div Klasse="Mitte">
                Ich bin das adaptive Element in der Mitte - Rasterlayout</div>
            <div Klasse="rechts"></div>
        </Artikel>
    </Abschnitt>