Wie halte ich CSS-Floats in einer Zeile?

216

Ich möchte zwei Elemente in derselben Zeile haben, die float: leftfür das Element auf der linken Seite verwendet werden.

Ich habe keine Probleme, dies alleine zu erreichen. Das Problem ist, ich möchte, dass die beiden Elemente in derselben Zeile bleiben , auch wenn Sie die Größe des Browsers sehr klein ändern . Weißt du ... wie es mit Tischen war.

Das Ziel ist es, zu verhindern, dass der Artikel auf der rechten Seite verpackt wird, egal was passiert .

Wie kann ich dem Browser mithilfe von CSS mitteilen, dass ich das Containing lieber dehnendiv als umbrechen möchte , sodass das float: right;Div unter dem liegt float: left; div?

was ich möchte:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
Jiaaro
quelle
54
Wie cool wäre es, wenn StackOverlow ein kleines Zeichen-Widget hinzufügen würde, damit wir diese Diagramme mit der Maus erstellen könnten? Könnte besser für designorientierte SE-Sites geeignet sein ... aber es wäre trotzdem großartig.
JoeCool
5
@JoeCool Die UX SE-Site verfügt bereits über ein Tool zum Erstellen von Modellen. meta.ux.stackexchange.com/questions/1291/…
Frank Hadder

Antworten:

77

Wickeln Sie Ihre Floating <div>S in einen Container <div>, der diesen browserübergreifenden Hack mit minimaler Breite verwendet:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

Sie können müssen auch "Überlauf" einstellen, aber wahrscheinlich nicht.

Dies funktioniert, weil:

  • Die !importantDeklaration in Kombination mit min-widthbewirkt, dass in IE7 + alles in derselben Zeile bleibt
  • IE6 wird nicht implementiert min-width, hat jedoch einen Fehler, der width: 100pxdie !importantDeklaration überschreibt und dazu führt, dass die Containerbreite 100 Pixel beträgt.
Eric Wendelin
quelle
Dies funktioniert gut für zwei Schwimmer, aber nicht für drei. Kann es für drei funktionieren?
Tylerthemiler
15
Das einzige Problem ist, dass eine feste Mindestbreite erzwungen wird.
Matt Montag
6
Dies ist keine Lösung, sondern nur eine minimale Breite, wenn Ihr Inhalt sehr klein wird (siehe Frage). Unterhalb von 100 Pixel haben Sie also das gleiche Problem. Insbesondere bei Tabellenzellen bleibt dies ein Problem.
Sanne
Absolut schockierend - mein Problem sofort gelöst. Ich habe mich mit diesem Problem in einem einfachen zweispaltigen Bootstrap-Layout mit mehr Box-Hacks auseinandergesetzt, als ich nennen kann, aber das hat perfekt funktioniert. Vielen Dank für die Erklärung, warum diese Arbeit - faszinierendes Zeug, der Dom ist.
Nocarrier
Dies mag mit divs funktionieren, aber ich habe es gerade mit ul / li getestet und es funktioniert nicht :(
AsGoodAsItGets
132

Eine andere Option ist, anstatt zu schweben, die Leerraum-Eigenschaft nowrap auf ein übergeordnetes div zu setzen:

.parent {
     white-space: nowrap;
}

und setzen Sie den Leerraum zurück und verwenden Sie eine Inline-Block-Anzeige, damit die Divs in derselben Zeile bleiben, aber Sie können ihr trotzdem eine Breite geben.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

Hier ist eine JSFiddle: https://jsfiddle.net/9g8ud31o/

Innovaat
quelle
4
Auf jeden Fall die beste Lösung, die ich gesehen habe. Es funktioniert für meinen Anwendungsfall, aber ich frage mich, wie gut es unterstützt wird. Glücklicherweise gehört die Verwendung von Schwimmern für ALLES langsam der Vergangenheit an.
Ryan Ore
1
Können Sie erklären, wie das funktioniert? oder zumindest irgendwelche Links?
Anirudhan J
4
@ AnirudhanJ Es ist nicht zu schwierig. Inline-Block lässt die Elemente normal mit Inline-Text fließen (behält jedoch einige der Füll- / Randfähigkeiten des Blocks bei), und Sie weisen das CSS buchstäblich nur an, den Text nicht mit der Option Leerzeichen: nowrap zu umbrechen (Anwenden von "normal") "Nochmals an das Kind, um zu vermeiden, dass es sich in alles ausbreitet)
Brian
Wie bringt man das Div auf der rechten Seite dazu, rechts vom Bildschirm zu schweben? Dadurch werden nur zwei Inline-Blöcke nebeneinander platziert, die keinen Zeilenumbruch verursachen.
AddMitt
Sie können auch den Buchstabenabstand verwenden: -3px (oder einen beliebigen Wert, der für Sie funktioniert), um den Abstand zwischen den Inline-Block-Elementen zu entfernen. PS: besser als die akzeptierte Antwort ;
Claudiu
15

Wickeln Sie Ihre Floater in ein Div mit einer Mindestbreite, die größer ist als die kombinierte Breite + Rand der Floater.

Keine Hacks oder HTML-Tabellen erforderlich.

Zar
quelle
10

Lösung 1:

Anzeige: Tabellenzelle (nicht weit verbreitet)

Lösung 2:

Tabellen

(Ich hasse Hacks.)

pkario
quelle
8

Eine weitere Option: Schweben Sie nicht in Ihrer rechten Spalte. Geben Sie ihm einfach einen linken Rand, um ihn über den Schwimmer hinaus zu bewegen. Sie benötigen ein oder zwei Hacks, um IE6 zu reparieren, aber das ist die Grundidee.

Steve Clay
quelle
4

Sind Sie sicher, dass schwebende Elemente auf Blockebene die beste Lösung für dieses Problem sind?

Bei CSS-Schwierigkeiten in meiner Erfahrung stellt sich oft heraus, dass ich keinen Weg sehe, das zu tun, was ich will, weil ich in Bezug auf mein Markup in eine Tunnelvision geraten bin (ich denke: "Wie kann ich diese machen ?" Elemente tun dies ? ") anstatt zurück zu gehen und zu schauen, was genau ich erreichen muss, und vielleicht mein HTML leicht zu überarbeiten, um das zu erleichtern.

Glenatron
quelle
Nun, es funktioniert für fast alles und das vorhandene Layout basiert darauf. Ich versuche nur, ein Problem mit dem
Layoutbruch
2

Ich würde empfehlen, Tabellen für dieses Problem zu verwenden. Ich habe ein ähnliches Problem und solange die Tabelle nur zum Anzeigen einiger Daten verwendet wird und nicht für das Hauptseitenlayout, ist dies in Ordnung.

Rob Elliott
quelle
2

Fügen Sie diese Zeile Ihrem Floated-Element-Selektor hinzu

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

Dadurch wird verhindert, dass der Breite Polster und Ränder hinzugefügt werden, sodass das Element immer in einer Reihe bleibt, auch wenn Sie z. drei Elemente mit einer Breite von 33,33333%

Nebojsha
quelle
0

Wenn der Benutzer die Fenstergröße horizontal reduziert und dadurch Floats vertikal gestapelt werden, entfernen Sie die Floats und verwenden Sie auf dem zweiten Div (das war ein Float) margin-top: -123px (Ihr Wert) und margin-left: 444px (Ihr Wert) to Positionieren Sie die Divs so, wie sie mit Schwimmern erschienen sind. Wenn sich das Fenster auf diese Weise verengt, bleibt das Div auf der rechten Seite an Ort und Stelle und verschwindet, wenn die Seite zu schmal ist, um es aufzunehmen. ... was (für mich) besser ist, als das rechte Div unter das linke Div zu "springen", wenn das Browserfenster vom Benutzer verengt wird.

Bruce Allen
quelle
-3

Ich habe mich darum gekümmert, jQuery zu verwenden. Der Grund, warum ich es so gemacht habe, war, dass A und B Prozentbreiten waren.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});
ScubaSteve
quelle
1
Ein Framework für CSS? Ich muss für ALLE JavaScript-Suchvorgänge -jquery durchführen, und aufgrund einer vollständigen und völligen Missachtung der Qualität müssen wir auch explizit nach CSS mit -jquery suchen. Mach es richtig oder mach es überhaupt nicht.
John