Zusammenfassung von 4 Methoden des Div+CSS-Layouts, um eine 2-Enden-Ausrichtung von CSS zu erreichen

<div Klasse="Box">
 <div Klasse="Demo">
     <div>1</div>
     <div>2</div> 
     <div>3</div>
 </div>
</div>

<Stil>
.Kasten{
     Breite: 300px; Rand: automatisch; Überlauf: ausgeblendet; Rahmen: 1px durchgezogen #ddd;
}
.box .demo{
    Rand links: -10px; Breite: 310px
}
.box .demo div{
     Breite: 93,333px;/*(Berechnung: (300-10*2)/3)*/
     schweben: links;
     Rand links: 10px;
}
</Stil>

<Stil>
.Demo{
     Rand: 0; Polsterung: 0;
     Textausrichtung: Blocksatz;
     text-align-last:justify;/*IE-Unterstützung lösen*/
     line-height:0;/*Lösen Sie den zusätzlichen Leerraum am unteren Rand des Standard-Browser-Containers*/
}
@media alle und (-webkit-min-device-pixel-ratio:0) {
  .Demo{
     font-size:0;/*webkit löscht den zusätzlichen Platz im letzten Element, nachdem im Element [Zeilenumbruch] oder [Leerzeichen] verwendet wurde*/
  }
}
.demo:after{/*text-align-last:justify wird nur vom Internet Explorer unterstützt, Standardbrowser müssen die Pseudoklasse .demo:after verwenden, um einen ähnlichen Effekt zu simulieren*/
     Anzeige: Inline-Block;
     Überlauf: versteckt;
     Breite: 100 %;
     Höhe: 0;
     Inhalt:'';
     vertical-align:top;/*Der Opera-Browser behebt das Problem des zusätzlichen Platzes unten*/
}
.demo div{
     Breite: 20 %;
     Anzeige: Inline-Block;
     text-align:center;/*Einfluss der oberen Elemente aufheben*/
     Textausrichtung zuletzt: zentriert;
     Schriftgröße: 12px;
}
</Stil>

<Stil>
.Demo{
    Anzeige: -WebKit-Box;
    Anzeige: -webkit-flex;
    Anzeige: -ms-flexbox;
    Anzeige: Flex;
    -webkit-box-pack:begründen;
    -webkit-justify-content:Leerzeichen zwischen;
    -ms-flex-pack:begründen;
    Inhalt ausrichten: Abstand dazwischen;
}

.demo div{
     Breite: 30 %; 
}
</Stil>

<Stil>
.Demo{
     -webkit-Spaltenanzahl:3;-moz-Spaltenanzahl:3;Spaltenanzahl:3;
     -webkit-Spaltenlücke:10px;-moz-Spaltenlücke:10px;Spaltenlücke:10px; 
}

.demo div{
     
}
</Stil>