css - div の行をラップしない

Question

divのセットfloat:rightを次々と作成し、それらがどれだけ存在するか、どれだけ幅が広いかに関係なく、それらをラップしないようにする方法。それらが一緒になってビューポートよりも広い場合、x スクロールが表示されます。

これらの div 内のコンテンツは正常に折り返されます。

CSSだけでもいいです。

Answer 1

親要素を でスタイルしますが、これは(または) 要素white-space: nowrap;でのみ機能します。次の HTML があるとします。display: inlinedisplay: inline-block;

<div id="parent">
    <div class="child"></div>
    <!-- there's quite a lot of these... -->
    <div class="child"></div>
</div>

そしてCSS：

#parent {
    white-space: nowrap;
}

#parent .child {
    display: inline-block;
    /* there's some other CSS for aesthetics */
}

JS フィドルのデモ。

残念ながら、 -ed 要素を強制的に改行しないようにする方法はないと思います。float

子孫要素の通常の行折り返しを保持する、または強制するには、継承を明示的にオーバーライドして設定する必要があります(さらに、またはwhite-space: normalを定義することもできます) 。widthmax-width

/* other CSS remains intact */

#parent .child {
    display: inline-block;
    /* irrelevant/aesthetic CSS */
    white-space: normal;
    max-width: 8em;
}

JS フィドルのデモ。

Answer 2

いくつかの要素: http://jsfiddle.net/thirtydot/A8duy/

多くの要素: http://jsfiddle.net/thirtydot/A8duy/1/

HTML:

<div class="block-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>​

CSS:

.block-container {
    text-align: right;
    white-space: nowrap;
    float: left;
    width: 100%;
    margin-bottom: 1em;
    border: 1px solid red;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.block-container > div {
    width: 50px;
    height: 50px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    text-align: left;
    white-space: normal;
    border: 1px solid blue;
}