0

私はこのようなHTML構造を持っています:

<div class="wrapper">
   <div class="fixed_column"></div>
   <div class="fixed_column"></div>
   <div class="fixed_column"></div>
</div>

ここに私のCSSがあります:

.wrapper{
  width:500px;
  float:left;
  /*overflow-y:scroll;*/
  overflow-x:scroll;
}

.fixed_column{
  float: left;
  height: 600px;
  position: relative;
  width: 250px;
}

だから私は2つの列だけが私の中に収まるようにしたいwrapper. したがって、3 番目の列が存在しない場合は、内側に収まります。

上記の HTML のように 3 番目の列を追加すると、3 番目の列は同じ行にとどまらず、次の行に移動し、horizo​​ntal ではなく垂直スクローラーになります。overflow-x私のcssに追加され、水平スクロールバーが表示されませんが、3番目の列はまだ次の行に落ちます。

しかし、私は増加しようとしましたがwrapper、750px今回は3つの列すべてが同じ行に収まるので、cssに問題はないと思いましたか、それとも間違っていると思いましたか?

wrapper私がいると、水平スクロールが表示されず、それぞれ500pxに3つの列があるのはなぜですかwidth:250px。

4

3 に答える 3

2

空白を追加: nowrap; float の代わりに inline-block を使用し、overflow-y の代わりに overflow-x を使用します。

これは機能します：

http://jsfiddle.net/vXqY2/

.wrapper {
    width: 600px;
    white-space: nowrap;
    overflow:scroll;
}
.fixed_column {
    display: inline-block;
    height: 100px;
    width: 250px;
    background-color: red;
}
于 2013-03-14T23:46:18.177 に答える
0

フロートされた要素は、親コンテナーの右側から外れ始めると、自動的に次のレベルに折り返されます。それがフロートの仕組みです。それらを同じ行に保つには、いくつかのオプションがあります。

  • 親コンテナを（あなたがしたように）より広くしますが、スクロールバーには追加の要素が必要です
  • (@Alex が提案したように)からfloat: left;に切り替えdisplay: inline-block;ますが、IE7 には譲歩する必要があります。
  • float: left;からに切り替えますdisplay: table-cell;。これはお勧めしません。試してみたところ、ちょっと痛いことがわかりました:-p

jsFiddle デモですべてのテクニックを見る

于 2013-03-15T01:01:54.780 に答える
-1

これは、固定列divsが 250 ピクセルしかないため、現在の 505 ピクセルのコンテナーを壊すことがないためです。

ここでこれを試してください。

例：

<div class="wrapper">
    <div class="scroll-container">
        <div class="fixed_column">A</div>
        <div class="fixed_column">B</div>
        <div class="fixed_column">C</div>
    </div>
</div>


.wrapper {
    width: 505px;
    position:relative;
    overflow-y: scroll;
    overflow-x: scroll;
}
.scroll-container {
    width:1000px;
}
.fixed_column {
    float: left;
    height: 600px;
    position: relative;
    width: 250px;
    background-color: green;
}
于 2013-03-14T23:58:58.487 に答える