Wie halte ich CSS-Floats in einer Zeile?

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  /  <---
 +---------------+  +------------------------\
                                             /

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.

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/

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.

Lösung 1:

Anzeige: Tabellenzelle (nicht weit verbreitet)

Lösung 2:

Tabellen

(Ich hasse Hacks.)

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.

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.

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.

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%

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.

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());
});