Wie kann ich verhindern, dass schwebende div-Elemente bei der Größenänderung des Browsers umbrochen werden?

Wie macht man DIV ' s, Schwamm Links nebeneinander nicht umbrechen, wenn der browser die Größe neu, so dass der viewport kleiner wird?

div {
  float: left;
}

Zum Beispiel, wenn der browser vollständig maximiert die divs line-up wie diesem:

|div| |div| |div| |div| |div| |div| |div| |div|

Aber wenn der browser die Größe neu, kleiner, dies geschieht:

|div| |div| |div| |div| |div|
|div| |div| |div|

Wie kann ich machen das divs nicht umgebrochen wird, wenn der browser die Größe neu, kleiner?

InformationsquelleAutor der Frage Mark | 2010-02-16

  1. 25

    Wickeln Sie Sie in ein weiteres div, welches eine Breite (oder min-width) angegeben.

    <div class="parentContainer">
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

.parentContainer {
    /* The width of the parent needs to be equal to the total width of the children.
    Be sure to include margins/padding/borders in the total. */
    width: 600px;
    overflow: auto;
}

    Es hilft auch, overflow: auto angegeben mit div, um seine Höhe zu entsprechen, das Kind schwimmt.

    InformationsquelleAutor der Antwort AaronSieb

  2. 18

    Ich bin ziemlich spät auf das Spiel, aber hier ist was ich gefunden habe, die funktioniert:

    Lassen Sie uns sagen, Sie haben eine navigation, die wie folgt strukturiert:

    <nav>
    <ul>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
    </ul>
</nav>

    Um es zu bekommen, um die Anzeige der links, inline, ohne je Verpackung können Sie einfach:

    nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

    Keine Feste Breite oder etwas benötigt.

    Fiddle: http://jsfiddle.net/gdf3prb4/

    InformationsquelleAutor der Antwort JacobTheDev

  3. 9

    Machen die div-container um Sie herum

    .container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}

    InformationsquelleAutor der Antwort easwee

  4. 7

    Erkenne ich, dass es in Mode, um Hass auf den Tischen, aber Sie können nützlich sein.

    http://jsfiddle.net/td6Uw/

    Stattdessen schweben die divs, legen Sie Sie in eine Tabelle und wickeln Sie die Tabelle mit einer Größe eingeschränkt div. Die TR wird verhindert Umbruch.

    Außerdem habe ich DIVs innerhalb des TDs-cell styling einfacher. Sie könnten Stil die TDs wenn Sie die Zeit verbringen, aber ich finde Sie schwer zu Stil und in der Regel wimp-out und benutzen Sie einfach die-DIV im TD eingesetzte Methode von meinem Turnschuh.

    InformationsquelleAutor der Antwort dlchambers

  5. 3

    Es ist eigentlich ganz einfach. Beispiel-code:

    Element {
white-space: nowrap;
}

    InformationsquelleAutor der Antwort derpymelon

Schreibe einen Kommentar