Wie verhindere ich, CSS schwebt in einer Zeile?

Question

Ich möchte zwei auf der gleichen Linie haben für das Element auf der linken Seite float: left.

Ich habe keine Probleme dies allein zu erreichen. Das Problem ist, ich möchte die beiden Elemente bleiben auf der gleichen Zeile , auch wenn Sie den Browser die Größe sehr klein . Sie wissen schon ... wie, wie es war mit Tischen.

Das Ziel ist, den auf der rechten Seite zu halten wickelt egal, was .

Wie ich den Browser sagen, CSS, ich würde eher das enthält div strecken als wickeln Sie es so das die float: right; div unter dem float: left; div ist?

, was ich will:

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

Answer 1

Wickeln Sie Ihre Schwimm <div>s in einem Behälter <div> das verwendet diese Cross-Browser-min-width Hack:

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

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

Das funktioniert, weil:

• Die !important Erklärung, kombiniert mit min-width verursachen alles auf der gleichen Linie in IE7 +
bleiben
• IE6 nicht implementiert min-width, aber es hat einen Bug, so dass width: 100px die !important Erklärung außer Kraft gesetzt, wodurch die Behälterbreite 100px sein.

Answer 2

Eine andere Möglichkeit ist, statt schwimmen, um den Weißraum-Eigenschaft nowrap zu einem übergeordneten div:

.parent {
     white-space: nowrap;
}

und setzen Sie die white-space und verwenden Sie einen Inline-Block-Display, so dass die divs auf der gleichen Linie bleiben, aber man kann es immer noch eine Breite geben.

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

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

Answer 3

Wickeln Sie Ihre Floater in einem div mit einer min-Breite, die größer ist als die kombinierte Breite + Marge des Floater.

Keine Hacks oder HTML-Tabellen benötigt werden.

Answer 4

Lösung 1:

display: table-cell (nicht weit unterstützt)

Lösung 2:

Tabellen

(I Hacks hassen.)

Answer 5

Eine weitere Option: Sie schwimmen rechten Spalte nicht; geben sie nur einen linken Rand sie über den Schwimmer zu bewegen. Sie werden einen Hack oder zwei brauchen IE6 zu beheben, aber das ist die Grundidee.

Answer 6

Sind Sie sicher, dass schwebte Block-Level-Elemente die beste Lösung für dieses Problem sind?

Oft mit CSS Schwierigkeiten in meiner Erfahrung es stellt sich heraus, dass der Grund, warum ich nicht einen Weg zu tun, das Ding sehen kann ich will, ist, dass ich in einer Tunnel-Vision im Hinblick auf meine Markup erwischt habe ( „denkt, wie kann ich mache diese -Elemente sie das ?“), anstatt zurückzugehen und zu schauen, was genau es ist, ich brauche zu erreichen und vielleicht ein wenig meine hTML-Nacharbeiten, dass zu erleichtern.

Answer 7

Ich würde empfehlen, Tabellen für dieses Problem verwenden. Ich bin ein ähnliches Problem habe und solange die Tabelle nur einige Daten und nicht für das Hauptseitenlayout anzuzeigen verwendet wird, ist es in Ordnung.

Answer 8

Fügen Sie diese Zeile in den Floats Selektor

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

Es wird verhindert, dass Polsterung und Grenzen Breite hinzugefügt werden, so dass Element immer in Reihe bleiben, auch wenn Sie zB haben. drei Elemente mit einer Breite von 33.33333%

Answer 9

Wenn der Benutzer reduziert horizontal Fenstergröße und das verursacht schwimmt vertikal zu stapeln, den Schwimmer entfernen und auf dem zweiten div (das war ein float) verwendet margin-top: -123px (Ihr Wert) und margin-left: 444px (IhrFormal Wert), um die divs zu positionieren, wie sie mit Schwimmern erschienen. Wenn auf diese Weise geschehen, wenn das Fenster verengt, bleibt die rechte Seite div vorhanden und verschwindet, wenn Seite zu schmal ist, um es zu schließen. ... die (für mich) ist besser als die rechte div „jump“ unten auf der linken Seite div aufweist, wenn das Browser-Fenster durch den Benutzer eingeengt wird.

Answer 10

So wie ich um diese bekam, war etwas jQuery zu verwenden. Der Grund, warum ich es so tat, war, weil A und B Prozent Breite 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());
});