Gibt es eine elegante Möglichkeit, drei Elemente links, zentriert und rechts auf derselben Linie auszurichten?
Im Moment benutze ich 3 <div> alles mit Breite: 33%; float: left; und es funktioniert nicht so gut.
Sie können seltsame Ergebnisse erhalten, wenn in dem Element, zu dem Sie es hinzufügen, ein Rand vorhanden ist. Dies ist der Fall, wenn width: 33% möglicherweise nicht funktioniert, weil Sie die Höhe des Rands einrechnen müssen, den dieses Element hat.
Dies wird dazu führen, dass es aufgrund des zu jedem div hinzugefügten Rands nicht wie erwartet funktioniert. Wenn Sie zu jedem Div-Element einen zu großen Rand hinzufügen, erhalten Sie ein ähnliches Ergebnis border: 5px solid !important;
Sobald Sie den Rand aus dem obigen Code entfernen, sollte es wie erwartet funktionieren.
Versuchen Sie Folgendes:
%Vor%Sie müssen berücksichtigen, dass die linken und rechten divs die Container-Box (ein div um den obigen Code) nicht nach unten drücken, auch wenn sie mehr Inhalt haben als das zentrale div, das einzige nicht floated. Ein Clearfix wird dafür sorgen.
Schwenken Sie die ersten beiden nach links und schweben Sie die dritte nach rechts, während Sie sicherstellen, dass die Breite der Linie entspricht, auf die Sie sie legen.
Verwenden Sie Pixelbreiten, wenn Ihr Design dies zulässt.
Hier ist noch eine weitere Variation des Themas: -
%Vor%Beachten Sie, dass die Umrandung möglich ist, indem Sie ein internes div für jedes div-Element verwenden. Gibt auch das Zentrum der verbleibenden 1% der Pixel.
Tags und Links css user-interface alignment positioning