0

私は次の構造を持っています：

<div id='container'>
  <div id='cont1' style='width:150px'>Content 1</div>
  <div id='cont2' style='width:150px'>Content 2</div>
  <div id='cont3' style='width:150px'>Content 3</div>
  <div id='cont4' style='width:150px'>Content 4</div>
  <div id='cont5' style='width:150px'>Content 5</div>
</div>

containerdivを水平スクロールさせたい。中にcont1居たい。これらの 5 つの div を水平方向にスクロールできるようにしたいのですが、コードで示したように、1 つの div を別の div の隣に配置したいだけかもしれません。cont5containercontx

問題は、この解決策を達成できないことです。たとえば、次のように考えてください。

<div id='container'>
  <div id='internalcontainer' style='width:750px'>
    <div id='cont1' style='width:150px'>Content 1</div>
    <div id='cont2' style='width:150px'>Content 2</div>
    <div id='cont3' style='width:150px'>Content 3</div>
    <div id='cont4' style='width:150px'>Content 4</div>
    <div id='cont5' style='width:150px'>Content 5</div>
  </div>
</div>

私には非常に複雑に思えたのは、ある div を別の div (連続 div) の隣に配置するだけで水平スクロールを取得することです。そこで、水平スクロールを実行する div 内に配置された固定幅のコンテナー内にそれらを配置しようとしました。スタイルを設定しようとすると、このコードでも機能しません。私の質問は次のとおりです。

  • 最初の構造で横スクロールを取得することはできますか?
  • 2つ目の構造で横スクロールは可能でしょうか？

私は css でたくさん試しましたが、overflow何も得られませんでした...

ありがとう

4

2 に答える 2

2

イベント onmouseover がトリガーされた場合はスタイルoverflow-x:scrollをコンテナー div に適用し、onmouseout がトリガーされたoverflow-x:hidden場合はスタイルをリセットできます。

編集

コンテナ div に追加する必要があるものは次のとおりです。

<div id='container' onmouseover='this.style["overflowX"]="scroll";'  onmouseout='this.style["overflowX"]="visible";'>
    ...
</div>

自分で試してみてください：http://jsfiddle.net/bukfixart/qX8Cx/

于 2013-01-06T00:15:44.517 に答える