it-swarm.com.de

Wie halte ich CSS-Floats in einer Zeile?

Ich möchte zwei Artikel in derselben Zeile haben, indem ich float: left Für den Artikel auf der linken Seite verwende.

Ich habe keine Probleme, dies alleine zu erreichen. Das Problem ist, ich möchte, dass die beiden Elemente bleiben in derselben Zeile , 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 rechts stehende Gegenstand umhüllt, egal was passiert .

Wie kann ich dem Browser mit CSS mitteilen, dass ich es vorziehen würde das enthaltende div zu strecken als es zu umbrechen, so dass das float: right; - Div unter dem float: left; Steht? div?

was ich will:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
214
Jiaaro

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 müssen kann auch "Überlauf" einstellen, aber wahrscheinlich nicht.

Das funktioniert, weil:

  • Die Deklaration !important In Kombination mit min-width Bewirkt, dass in IE7 + alles in der gleichen Zeile bleibt
  • IE6 implementiert min-width Nicht, hat jedoch einen Fehler, der dazu führt, dass width: 100px Die Deklaration !important Überschreibt und die Container-Breite 100px beträgt.
77
Eric Wendelin

Eine andere Option besteht darin, anstelle von Floating die Eigenschaft white-space 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/

130
Innovaat

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

Keine Hacks oder HTML-Tabellen benötigt.

15
Czar

Lösung 1:

anzeige: Tabellenzelle (nicht weit verbreitet)

Lösung 2:

tabellen

(Ich hasse Hacks.)

10
pkario

Eine andere Option: Schweben Sie nicht in der rechten Spalte. Geben Sie ihm einfach einen linken Rand, um ihn über den Schwimmer hinaus zu bewegen. Sie brauchen ein oder zwei Hack, um IE6 zu reparieren, aber das ist die Grundidee.

8
Steve Clay

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

Oft stellt sich heraus, dass ich aufgrund meiner Erfahrung mit CSS-Schwierigkeiten keine Möglichkeit sehe, das zu tun, was ich will, weil ich in Bezug auf mein Markup in eine Tunnelvision geraten bin (ich überlege, wie ich this elements do this? ") anstatt zurückzugehen und nachzuschauen, was genau ich erreichen und vielleicht mein HTML leicht überarbeiten muss, um das zu erleichtern.

4
glenatron

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 es in Ordnung.

2
Rob Elliott

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

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

Dadurch wird verhindert, dass die Breite durch Auffüllen und Umrisse erweitert wird, sodass das Element immer in Reihe bleibt, auch wenn Sie z. drei Elemente mit einer Breite von 33,33333%

2
Nebojsha

Wenn der Benutzer die Fenstergröße horizontal reduziert und dies dazu führt, dass Floats vertikal gestapelt werden, entfernen Sie die Floats und verwenden Sie im zweiten Div (das war ein Float) den oberen Rand: -123px (Ihr Wert) und den linken Rand: 444px (Ihr Wert) bis Positionieren Sie die Divs so, wie sie mit Schwimmern erscheinen. Wenn Sie dies tun und das Fenster verkleinert wird, bleibt die rechte Unterteilung bestehen und verschwindet, wenn die Seite zu schmal ist, um sie einzuschließen. ... was (für mich) besser ist, als dass der rechte Teil nach unten unter den linken Teil "springt", wenn das Browserfenster vom Benutzer verengt wird.

0
Bruce Allen