HTMLとCSS..addingのdivタグの横並びn回

Question

私は、次のレイアウト

とHTML/CSSレイアウトを構築する必要があります|静的事業部|コンテンツDIV0 |コンテンツ路Div1 | ... |コンテンツDIVN |静的Div |

<div id="container"> 
    <div id="static_div_1"></div> 
    <div id="content"> 
     <div id="item1"></div> 
     <div id="item2"></div> 
     .... 
     <div id="itemN"></div> 
    </div> 
    <div id="static_div_2"></div> 
</div> 

要件：

1. すべてのdiv要素は、次の 互いに積層される必要があるが、以下のように

   私のコードの縮小版です。

2. javascriptを使用してDIVをコンテンツDIVに動的に追加する必要があります
3. 静的DIVはコンテンツの先頭と末尾に位置を維持する必要があります。
4. コンテンツDIVは、私は次の問題に苦しんでいますhorizo​​ntaly

スクロールする必要があります。

1. ポイントした後、コンテンツのdivを挿入DIVとdiv要素の別の行がレンダリングされ始めるラップ開始します。

編集：プレーンなデータのような本質的な表形式ではありません。各divがそれ自身のフォームのようであると仮定してください。 W2のようなもの。私はちょうどコンテンツDIVでスクロールする必要があります。 。さらに悪い私は本当にGUIの男ではないよようにするには.. :(

をすべてのヘルプは大歓迎されます

Answer 1

が必要なCSSコードはこれです：私が追加した

#static_div_1, #static_div_2 { 
    float: left; 
    width: 200px; 
    } 
    #content { 
    float: left; 
    overflow-x: scroll; 
    white-space: nowrap; 
    width: 600px; 
    } 
    #content .item { 
    display: inline-block; 
    *display: inline; /* Target IE6/7 only */ 
    width: 150px; 
    zoom: 1; 
    } 

注意。彼らのスタイルを#content divの内側の各項目にクラス「アイテム」このレイアウトのキーは次のとおりです。

1. メイク：三つの部分、＃のstatic_div_1、＃のstatic_div_2と＃を「フロート左」コンテンツdivs（オプションでそれらに固定幅）。
2. #content divの "overflow-x：scroll"スタイル。
3. #content divの「white-space：nowrap」です。
4. #content div内の各項目に「display：inline-block」を設定します。

各項目の間にはスペースがあります。これは改行スペースなので、これを避けるために、それらのアイテムdivの間に改行やスペースを入れてはいけません。

この結果があなたに役立つことを願っています。 よろしくお願いいたします。

更新：IE6/7で動作するようになりました。これらのブラウザで「display：inline-block」を正しく設定するには、次の行が追加されていることに気づくでしょう：