CSS implementiert sechs adaptive zweispaltige Layoutmethoden

  <Text>
        <div Klasse="Wrapper">
            <div Klasse="links"></div>
            <div Klasse="rechts"></div>
        </div>
   </body>

.Verpackung{
    Anzeige: Flex;
}
.links{
    Breite: 200px;
    Höhe: 400px;
    Hintergrund: schwarz;
}
.Rechts{
    biegen: 1;
    Höhe: 400px;
    Hintergrund: rot;
}

.links{
    schweben: links;
    Breite: 200px;
    Höhe: 400px;
    Hintergrund: schwarz;
}
.Rechts{
    Hintergrund: rot;
    Höhe: 400px;
}

.links{
    Breite: 200px;
    Höhe: 400px;
    schweben: links;
    Hintergrund: schwarz;
}
.Rechts{
    Überlauf: versteckt;
    Höhe: 400px;
    Hintergrund: rot;
}

.Verpackung{
    Position: relativ;
}
.links{
    Breite: 200px;
    Höhe: 400px;
    Hintergrund: schwarz;
}
.Rechts{
    Position: absolut;
    oben: 0;
    links: 200px;
    rechts:0;
    unten: 0;
    Hintergrund: rot;
}

.Verpackung{
    Anzeige:Tabelle;
    Breite: 100 %;
}
.links rechts{
    Anzeige: Tabellenzelle;
    Höhe: 400px
}
.links{
    Hintergrund: schwarz;
}
.Rechts{
    Hintergrund: rot;
}

.Verpackung{
    Anzeige: Raster;
    Breite: 100 %;
    Höhe: 400px;
    Rastervorlagenspalten: 200px automatisch;
}
.links{
    Hintergrund: schwarz;
}
.Rechts{
    Hintergrund: rot;
}