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

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

Das Div+CSS-Layout zur Erzielung einer 2-Enden-Ausrichtung wird häufig in unserem Webseitensatz verwendet. Dieser Artikel fasst die Methoden zusammen, die erreicht werden können:

HTML-Struktur

Verwenden Sie CSS, um die Divs in der Demo auszurichten.

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

1. Negative Margenmethode

Bei dieser Methode muss eine zusätzliche Verschachtelungsebene implementiert werden, wobei der Abstand der Elemente als Randüberlaufwert der mittleren Ebene verwendet wird.

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

2.display:inline-block/text-align:justify-Methode

Die Justify-Methode ist einfacher und bequemer. Solange ein einfaches Element deklariert ist, werden die Elemente darin automatisch ausgerichtet und mit gleichem Abstand angeordnet! Es ist nicht erforderlich, den Randabstand zwischen den einzelnen Listenelementen zu berechnen, geschweige denn die Breite des übergeordneten Containers zu ändern.

Hinweis: Die Elemente in der Demostruktur müssen [Zeilenumbrüche] oder [Leerzeichen] enthalten, sonst funktioniert das direkte Schreiben nicht.

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

3. CSS3-Eigenschaft „space-between“

Diese Methode basiert auf der Entwicklung von Webanwendungen auf Basis des WebKit-Kernels und WinPhone IE10 und höher und wird häufig für das Layout mobiler Endgeräte verwendet.

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

4. CSS3-Eigenschaft „Spaltenanzahl“

Das Spaltenattribut ist ein mehrspaltiges Layout. Um eine Ausrichtung an beiden Enden mithilfe einer Spalte zu erreichen, müssen Sie nur die Anzahl der Module so einstellen, dass sie mit der Anzahl der Spalten übereinstimmt. Dies wird für das Layout mobiler Endgeräte empfohlen.

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

.demo div{
     
}
</Stil>

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.

<<:  Sechs Methoden zur Nginx-Optimierung

>>:  Detaillierte Erklärung von Promises in JavaScript

Artikel empfehlen

Detaillierte Erklärung der MySQL-Datengruppierung

Gruppe erstellen Die Gruppierung wird in der GROU...

Richtige Methode zum Laden von Schriftarten in Vue.js

Inhaltsverzeichnis Schriftarten mit font-face ric...

Detaillierte Erklärung der RPM-Installation in MySQL

Installation und Deinstallation anzeigen # rpm -q...

Mehrere Möglichkeiten, die Lesbarkeit von Webseiten zu verbessern

1. Verwenden Sie kontrastierende Farben. Mit Kont...

Eine kurze Diskussion zum CSS-Höhenkollapsproblem

Leistung Zum Beispiel: HTML: <div Klasse="...

JS verwendet Canvas-Technologie, um Echarts-Balkendiagramme zu imitieren

Canvas ist ein neues Tag in HTML5. Sie können js ...

Bringen Sie Ihnen bei, wie Sie ein React+Antd-Projekt von Grund auf erstellen

Bei den vorherigen Artikeln handelte es sich um m...

Detaillierte Erklärung der MySQL InnoDB-Indexerweiterung

Indexerweiterung: InnoDB erweitert automatisch je...

CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern

Beim Front-End-Layout des Formulars müssen wir hä...

So stellen Sie Spring Boot mit Docker bereit

Die Entwicklung der Docker-Technologie bietet ein...

XHTML-Tutorial, eine kurze Einführung in die Grundlagen von XHTML

<br />Dieser Artikel gibt Ihnen eine kurze E...

Verwendung des Linux-Watch-Befehls

1. Befehlseinführung Der Befehl „Watch“ führt den...

Vue realisiert den Produktlupeneffekt

In diesem Artikelbeispiel wird der spezifische Co...