CSS löst das Fehlausrichtungsproblem von Inline-Blöcken

Schluss mit Unsinn, Postleitzahl

HTML-Teil

<div class="positionleft">Ich stehe auf der linken Seite der Positionsmethode und mache 30 % aus</div>
        <div class="positionright">Ich stehe auf der rechten Seite der Positionsmethode und mache 70 % aus</div>

CSS-Teil

 .positionleft {
           Position: relativ;
           Anzeige: Inline-Block;
           Hintergrundfarbe: #8d8d8d;
           Breite: 30%;
           Höhe: 20%;

       }
       .positionright {
           Position: relativ;
           Anzeige: Inline-Block;
           links: 0;
           Hintergrundfarbe: #ff8888;
           Breite: 70%;
           Höhe: 20%;
       }

Anzeigeeffekt

Es ist deutlich zu erkennen, dass die beiden Div-Blöcke falsch ausgerichtet sind. Nach Rücksprache mit den Informationen stellt sich heraus, dass dieses Phänomen auftritt, wenn zwischen den beiden Inline-Blöcken ein Leerzeichen vorhanden ist.

Ändern Sie den HTML-Code wie folgt

<div class="positionleft">Ich stehe auf der linken Seite der Positionsmethode und mache 30 % aus</div> <div class="positionright">Ich stehe auf der rechten Seite der Positionsmethode und mache 70 % aus
</div>

Löschen Sie einfach den Leerraum zwischen den beiden Divs und sehen Sie sich die Wirkung an.

Problemlösung

Bitte beachten Sie dieses Problem, wenn Sie Dokumentformatierungstools wie prettier verwenden

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie man das Fehlausrichtungsproblem von Inline-Blöcken mit CSS löst. Weitere relevante Inhalte zur Fehlausrichtung von CSS-Inline-Blöcken finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder stöbern Sie weiter in den verwandten Artikeln unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!