web-dev-qa-db-ja.com

フローティングdivが新しい行に折り返されないようにする

私はこれをSOで数回尋ねましたが、ChromeまたはFirefox。

水平スクロールバーを持つ親divを水平に、左にフローティングしたdivのセットを実行します。

私はここでこのくだらないインラインcssでやりたいことを示すことができます： http://jsfiddle.net/ajkochanowicz/tSpLx/3/

ただし、SO *での回答から、これは機能するはずですが、私の目的では機能しません。 http://jsfiddle.net/ajkochanowicz/tSpLx/2/

各アイテムの絶対位置を定義せずにこれを行う方法はありますか？

*例えば。 フローティングdivの折り返しから次の行への移動を防ぐ

htmlcsscss-float
19
Adam Grant

これで十分です。

    .float-wrap {
      /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
      width: 816px;
      border: 1px solid;
      /* causes .float-wrap's height to match its child divs */
      overflow: auto;
    }
    .left-floater {
      width: 100px;
      height: 100px;
      border: 1px solid;
      float: left;
    }
    .outer {
      overflow-x: scroll;
    }
<div class="outer">
  <div class="float-wrap">
    <div class="left-floater">
      One
    </div>
    <div class="left-floater">
      Two
    </div>
    <div class="left-floater">
      Three
    </div>
    <div class="left-floater">
      I should be to the <s>left</s> right of "Three"
    </div>
    <div class="left-floater">
      I float.
    </div>
    <div class="left-floater">
      I float.
    </div>
    <div class="left-floater">
      I float.
    </div>
    <div class="left-floater">
      I float.
    </div>
  </div>
</div>

.float-wrapは、divsのスペースを開いたままにします。少なくとも横に並べるのに十分なスペースを常に維持するので、ラップする必要はありません。 .outerは、スクロールバーと、ウィンドウの幅に合わせたサイズを提供します。

16
AaronSieb

絶対配置で要素の周りに2つ目のラッパーを使用します。次に、個々のアイテムをフロートさせることができます。

<style type="text/css">
    #outter {
        position: relative;
        width: 500px;
        height: 200px;
        overflow: scroll;
    }
    #inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 1000px;
        height: 200px;
    }
    #inner .item {
        float: left;
        display: inline;
    }    
</style>

<div id="outter">
    <div id="inner">
        <div class="item">Item #1</div>
        <div class="item">Item #2</div>
        <div class="item">Item #3</div>
    </div>
</div>

その中にあるアイテムの数に基づいて#innerの幅を調整する必要があります。これは、アイテムの数がわかっている場合はロード時に、またはページのロード後にJavaScriptを使用して実行できます。

0
Kory Sharp

この質問はかなり前に尋ねられましたが、それでも検索エンジンの結果に多く見られます。したがって、新しい答えを追加することはまだ有用だと感じています。 flexbox（現在は適切なブラウザのサポートがあります）を使用して、親に固定幅を設定することなく、望ましい結果を達成することも可能になりました。

例のクラス名を使用します（要素が実際にフロートされなくなったため、少し離れています）。

.float-wrap {
  display: flex;
  flex-wrap: nowrap;
}

.left-floater {
  flex: 0 0 100px;
}

.outer {
  overflow-x: auto
}
0
BraMKJ