Ich möchte 3 Divs in einem Container-Div ausrichten lassen, ungefähr so:
[[LEFT] [CENTER] [RIGHT]]
Das Container-Div ist 100% breit (keine festgelegte Breite), und das mittlere Div sollte nach der Größenänderung des Containers in der Mitte bleiben.
Also habe ich gesetzt:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
Aber es wird:
[[LEFT] [CENTER] ]
[RIGHT]
Irgendwelche Tipps?
overflow: hidden;
diecenter
Spalte richtig ausgerichtet zu werden . Bei der Medienabfrage für kleine Geräte, bei der alle drei Spalten auf der Seite übereinanderoverflow: hidden;
zentriert waren , musste ich die mittlere Zeile (bei großen Geräten die rechte Spalte) verwenden, da sie sonst keine Höhe hatte und nicht vertikal zentriert war zwischen der oberen und unteren Reihe.Antworten:
Setzen Sie mit diesem CSS Ihre Divs so (schwebt zuerst):
PS Sie können auch nach rechts, dann nach links und dann in der Mitte schweben. Wichtig ist, dass die Schwimmer vor dem Hauptteil "Haupt" stehen.
PPS Sie möchten oft das Letzte in
#container
diesem Snippet,<div style="clear:both;"></div>
das sich#container
vertikal erstreckt , um beide Seitenschwimmer aufzunehmen, anstatt seine Höhe nur von dort zu nehmen#center
und möglicherweise zuzulassen, dass die Seiten aus dem Boden herausragen.quelle
border:solid
. Wenn es 100% ist, schließen Sie es in ein anderes div ein, um es innerhalb Ihrer Seite zu positionieren.Wenn Sie Ihre HTML-Struktur nicht ändern möchten, können Sie dies auch durch Hinzufügen
text-align: center;
zum Wrapper-Element und adisplay: inline-block;
zum zentrierten Element tun .Live-Demo: http://jsfiddle.net/CH9K8/
quelle
Horizontale Ausrichtung von drei Divs mithilfe von Flexbox
Hier ist eine CSS3-Methode zum horizontalen Ausrichten von Divs innerhalb eines anderen Divs.
jsFiddle
Die
justify-content
Eigenschaft nimmt fünf Werte an:flex-start
(Standard)flex-end
center
space-between
space-around
In allen Fällen befinden sich die drei Divs in derselben Zeile. Eine Beschreibung der einzelnen Werte finden Sie unter: https://stackoverflow.com/a/33856609/3597276
Vorteile der Flexbox:
Um mehr über die Flexbox zu erfahren, besuchen Sie:
Browserunterstützung: Flexbox wird von allen gängigen Browsern außer IE <10 unterstützt . Einige neuere Browserversionen wie Safari 8 und IE10 erfordern Herstellerpräfixe . Verwenden Sie Autoprefixer , um schnell Präfixe hinzuzufügen . Weitere Details in dieser Antwort .
quelle
Die Float-Eigenschaft wird tatsächlich nicht zum Ausrichten des Texts verwendet.
Diese Eigenschaft wird verwendet, um ein Element entweder rechts oder links oder in der Mitte hinzuzufügen.
für die
float:left
Ausgabe wird sein[First][second][Third]
für die
float:right
Ausgabe wird sein[Third][Second][First]
Das bedeutet, dass die Eigenschaft float => left Ihr nächstes Element links vom vorherigen Element hinzufügt. Gleicher Fall mit right
Außerdem müssen Sie die Breite des übergeordneten Elements berücksichtigen. Wenn die Summe der Breiten der untergeordneten Elemente die Breite des übergeordneten Elements überschreitet, wird das nächste Element in der nächsten Zeile hinzugefügt
[Erste Sekunde]
[Dritte]
Sie müssen also all diese Aspekte berücksichtigen, um das perfekte Ergebnis zu erzielen
quelle
Ich mag meine Bars eng und dynamisch. Dies ist für CSS 3 und HTML 5
Erstens ist das Einstellen der Breite auf 100 Pixel einschränkend. Tu es nicht.
Zweitens funktioniert das Einstellen der Containerbreite auf 100% in Ordnung, bis davon die Rede ist, dass es sich um eine Kopf- / Fußzeilenleiste für die gesamte App handelt, z. B. eine Navigations- oder Credits- / Copyright-Leiste. Verwenden Sie
right: 0;
stattdessen für dieses Szenario.Sie verwenden die id (Hash
#container
,#left
etc.) anstelle von Klassen (.container
,.left
usw.), was in Ordnung ist, wenn Sie Ihre Stil - Muster in Ihrem Code an anderer Stelle wiederholen mögen. Ich würde stattdessen Klassen verwenden.Bei HTML muss die Reihenfolge nicht ausgetauscht werden für: left, center & right.
display: inline-block;
behebt dieses Problem, indem Ihr Code wieder sauberer und logisch in Ordnung gebracht wird.Zuletzt müssen Sie die Schwimmer aufräumen, damit sie nicht mit der Zukunft in Konflikt geraten
<div>
. Du machst das mit demclear: both;
Zusammenfassen:
HTML:
CSS:
Bonuspunkt bei Verwendung von HAML und SASS;)
HAML:
SASS:
quelle
Zum Ausrichten der Elemente stehen verschiedene Tricks zur Verfügung.
01. Tischtrick verwenden
Code-Snippet anzeigen
02. Flex Trick verwenden
Code-Snippet anzeigen
03. Float Trick verwenden
Code-Snippet anzeigen
quelle
Dies kann einfach mit der CSS3 Flexbox durchgeführt werden, eine Funktion, die in Zukunft (wenn sie
<IE9
vollständig tot ist) von fast jedem Browser verwendet wird.Überprüfen Sie die Browserkompatibilitätstabelle
HTML
CSS
Ausgabe:
Code-Snippet anzeigen
quelle
Mit Twitter Bootstrap:
quelle
mögliche Antwort, wenn Sie die Reihenfolge des HTML beibehalten und nicht flex verwenden möchten.
HTML
CSS
Code Pen Link
quelle
HTML:
CSS:
text-align:center;
ergibt eine perfekte Ausrichtung in der Mitte.JSFiddle Demo
quelle
Ich habe einen weiteren Versuch unternommen, dies zu vereinfachen und ohne die Notwendigkeit eines Containers zu erreichen.
HTML
CSS
Sie können es live bei JSFiddle sehen
quelle
Mit Bootstrap 3 erstelle ich 3 Divs gleicher Breite (im 12-Spalten-Layout 4 Spalten für jedes Div). Auf diese Weise können Sie Ihre zentrale Zone auch dann zentriert halten, wenn die linken / rechten Abschnitte unterschiedliche Breiten haben (wenn sie den Spaltenraum nicht überlaufen).
HTML:
CSS:
CodePen
Um diese Struktur ohne Bibliotheken zu erstellen, habe ich einige Regeln aus Bootstrap CSS kopiert.
HTML:
CSS:
CopePen
quelle
Hier sind die Änderungen, die ich an der akzeptierten Antwort vornehmen musste, als ich dies mit einem Bild als zentralem Element tat :
#center
in diesem Fall). Wenn dies nicht der Fall, werden Sie setzen müssen ,display
zublock
, und es scheint zu Mitte in Bezug auf den Raum zwischen dem Floats.Stellen Sie sicher, dass Sie die Größe des Bildes und seines Containers festlegen :
quelle
Sie können dies versuchen:
Ihr HTML-Code lautet wie folgt:
und dein CSS-Code wie folgt:
Die Ausgabe sollte also folgendermaßen aussehen:
quelle
quelle
Sie haben es richtig gemacht, Sie müssen nur Ihre Schwimmer löschen. Einfach hinzufügen
zu Ihrer Containerklasse.
quelle
Die einfachste Lösung besteht darin, eine Tabelle mit 3 Spalten zu erstellen und diese Tabelle zu zentrieren.
html:
CSS:
quelle
quelle