CSS div float links und rechts nowrap
Ein kleiner Hintergrund: Ich arbeite an einem Header, der das Ganze mit auf meiner Webseite überspannt. Ich möchte, dass der aktuelle Benutzername, eine Schaltfläche zum Abmelden usw. in der Kopfzeile nach rechts verschoben wird, und ich möchte, dass sich das Logo und einige Navigationselemente auf der linken Seite befinden. Wenn das Browserfenster so schrumpft, dass die linken Objekte und die richtigen Objekte kollidieren, möchte ich nicht, dass sie umbrochen werden. Ich habe den header-container div auf Überlauf gesetzt: auto, also würde ich gerne scrollen.
Die Frage: Auch wenn ich einen div float habe: left und div float: rechts beide mit display: inline-block, und die eltern mit white-space: no wrap - the wrap !!! Durch Zufall habe ich herausgefunden, dass ich es zum Laufen bringen konnte, indem ich das noch ein div auch mit display umschloss: Inline-Block. Warum ist das ???
Unten ist mein Code und eine funktionierende Datei, um sowohl das funktionierende Setup als auch das Setup zu zeigen, das umgebrochen wird. Ich verstehe nicht, warum ich das extra div brauche. Ссылка
Wenn ich das Fenster verkleinere, möchte ich nicht, dass das zweite blaue Rechteck auf eine neue Zeile fällt
HTML:
%Vor%CSS:
%Vor%Oder vielleicht gibt es einen besseren Weg, um das zu erreichen, was ich will.
Vielen Dank im Voraus!
edit: Aktualisierter jsfiddle-Link
2 Antworten
Beispiel mit den linken, rechten, oberen und unteren Rändern hinzugefügt; mehrere divs; Höhe des Hauptrahmens einstellen; linken Rand für links am weitesten links schwebend div setzen; und rechter Rand von rechts am meisten schwimmende Div:
Ergebnis:
Styling und HTML in einer Datei:
%Vor%Code geändert von dieser Diskussion und einem anderen.
display: inline-block wirkt auf die untergeordneten Elemente des Selektors. Hier ist die aktualisierte Version, wo Inline-Block aus den untergeordneten Elementen entfernt wurde.
Ich müsste das Markup der Seite sehen, die Sie erstellen möchten. Ich frage mich, ob die Verwendung von Positionierung der richtige Weg ist.
Hier überprüfen Sie dies und lassen Sie mich wissen, wenn es hilft: Ссылка
%Vor%