CSS white-space nowrap funktioniert nicht

Ich habe ein div mit mehreren untergeordneten divs, die schwimmende Links. Ich will Sie nicht zu brechen, so dass ich Sie display:inline-block und white-space:nowrap. Leider nichts passiert. Sie halten gerade brechen.

Am Ende möchte ich scrollen in x-Richtung, aber wenn ich overflow-x:scroll; overflow-y:visible es Schriftrollen in y-Richtung.

.a {
    width: 400px;
    height: 300px;
    white-space: nowrap;
    display: inline-block;
}
.b {
    float: left;
    width: 50px;
    height: 200px;
    display: inline-block;
}

<div class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="clearfix"></div>
</div>

Können Sie sehen, meine komplette Implementierung auf JSFiddle

  • normalerweise würde man die clearfix auf dem wrapper-div - z.B. bei Verwendung von Nicholas Gallagher ' s neuer micro-clearfix-hack.
  • Klären. Sie wollen die rote .einen block haben mit einer Bildlaufleiste am unteren Rand, wenn es zu viele sind .b-Blöcke passen rein??
  • Ich habe einen clearfix meiner Geige, aber es hat nicht geholfen.
  • You ' r Recht. Dies ist, was ich wollte. Craighead hast, mein problem zu lösen, siehe mein Kommentar auf seine Antwort
InformationsquelleAutor Julian F. Weinert | 2014-01-16
  1. 9

    Ich kann nicht ganz verstehen, Ihre Frage, aber es scheint, wie die divs/scroll-Verhalten bei entfernen: float: left; aus .b und hinzufügen: overflow:auto; zu .a

    • Danke! Ich änderte .b zu display:inline-block und glaube nicht, dass die Tatsache, dass inline-Blöcke nicht brechen... 🙂
    InformationsquelleAutor Craighead
  2. 2

    Nicht sicher, was du meinst, aber wenn man halt floading b, und geben Sie Ihr ein overflow:auto sollte es funktionieren

    sehen: /jsfiddle.net/88yjz/3/

    • Danke, Craighead hatte das gleiche fix. Ich glaube nicht, dass die Tatsache, dass inline-Blöcke nicht wickeln, wenn ich änderte .b aus display:block; zu display:inline-block;
    InformationsquelleAutor user3004410
  3. 0

    Tut dies, geben Sie, was Sie wollen? Hinzugefügt überlauf-scrollen.

    * {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
    background-color: #EEEEEE;
}
.a {
    width: 400px;
    height: 300px;
    white-space: nowrap;
    overflow:scroll;          /* Added this line*/
    background-color: lightcoral;
    -webkit-box-sizing:border-box;
}
.b {
    width: 50px;
    height: 200px;
    margin-top: 50px;
    margin-left: 15px;
    display: inline-block;
    background-color: lightgreen;
    -webkit-box-sizing:border-box;
}
.clearfix {
    float: none;
    clear: both;
}
    InformationsquelleAutor Ruskin
Schreibe einen Kommentar