センターのスクロール

Question

私のコードで 1つのコンテナ内に3つのブロックがあります。 1つは左にフリーズし、もう1つは右にフリーズし、もう1つはこれら2つのdivの間をスクロールします。現代のグリッドのように。しかし、私はグリッドを使いたくない。

私は試しましたが、センターブロックは水平スクロールしていません。 センターブロックが折れないようにする代わりに、水平にスクロールする必要があります。

* { 
 
\t \t \t box-sizing: border-box; 
 
\t \t } 
 
\t \t 
 
\t \t .container { 
 
\t \t \t width: 100%; 
 
\t \t \t overflow: auto; 
 
\t \t \t white-space: nowrap 
 
\t \t } 
 
\t \t 
 
\t \t .scroll-center { 
 
\t \t \t width: auto; 
 
\t \t \t overflow: auto; 
 
\t \t \t display: block; 
 
\t \t \t white-space: nowrap 
 
\t \t } 
 
\t \t 
 
\t \t .row { 
 
\t \t \t float: left; 
 
\t \t } 
 
\t \t 
 
\t \t .cell { 
 
\t \t \t padding: 3px; 
 
\t \t \t border: 1px solid #bbb; 
 
\t \t \t min-height: 25px; 
 
\t \t \t min-width: 200px; 
 
\t \t }

<div class="container"> 
 
\t \t <div class="row"> 
 
\t \t <div class="cell">HeaderL1</div> 
 
\t \t <div class="cell">HeaderL2</div> 
 
\t \t <div class="cell">HeaderL3</div> 
 
\t \t </div> 
 
\t \t <div class="scroll-center"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="cell">HeaderT2</div> 
 
\t \t \t \t <div class="cell">Data21</div> 
 
\t \t \t \t <div class="cell">Data22</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="cell">HeaderT3</div> 
 
\t \t \t \t <div class="cell">Data31</div> 
 
\t \t \t \t <div class="cell">Data32</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="cell">HeaderT4</div> 
 
\t \t \t \t <div class="cell">Data41</div> 
 
\t \t \t \t <div class="cell">Data42</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="cell">HeaderT5</div> 
 
\t \t \t \t <div class="cell">Data51</div> 
 
\t \t \t \t <div class="cell">Data52</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="cell">HeaderT6</div> 
 
\t \t \t \t <div class="cell">Data61</div> 
 
\t \t \t \t <div class="cell">Data62</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="cell">HeaderT7</div> 
 
\t \t \t \t <div class="cell">Data71</div> 
 
\t \t \t \t <div class="cell">Data72</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="cell">HeaderT8</div> 
 
\t \t \t \t <div class="cell">Data81</div> 
 
\t \t \t \t <div class="cell">Data82</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="cell">HeaderT9</div> 
 
\t \t \t \t <div class="cell">Data91</div> 
 
\t \t \t \t <div class="cell">Data92</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="right"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="cell">HeaderTR</div> 
 
\t \t \t \t <div class="cell">DataR1</div> 
 
\t \t \t \t <div class="cell">DataR2</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 1

あなたはおそらくあなたのコンテナに幅を追加する必要があります。今は100％に設定されているので、ブラウザウィンドウを超えたサイズにはなりません。代わりに、このような何か行うことができます：私はあなたが動的にこの値を変更する必要があるかもしれませんことを実現

.container { 
    overflow: auto; 
    white-space: nowrap; 
    width:2000px; 
} 

をうまくいけば、このあなたは

を開始します。例：http://codepen.io/nilestanner/pen/jAjbdK

Answer 2

例で試してみてください。

CSS：

* { 
      box-sizing: border-box; 
     } 
.left, .center, .right{ 
      float:left 

} 


     .center { 
      width:400px; 
      overflow: scroll; 
      display: block; 
      white-space: nowrap 
     } 
    #center-scroll{ 
     width:2000px; 
    } 
    .center .row{ 
      display:inline-block; 
     width:33%; 
     } 
    .center .row .cell{ 

     min-width:100%; 
     } 


     .row{ 
      float:left; 
     } 
     .cell { 
      padding: 3px; 
      border: 1px solid #bbb; 
      min-height: 25px; 
      min-width: 200px; 
     } 

HTML

<div class="container"> 
    <div class="left"> 
    <div class="row" > 
      <div class="cell">HeaderL1</div> 
      <div class="cell">HeaderL2</div> 
      <div class="cell">HeaderL3</div> 
     </div> 

    </div> 

     <div class="center"> 
    <div id="center-scroll"> 
    <div class="row"> 
       <div class="cell">HeaderT2</div> 
       <div class="cell">Data21</div> 
       <div class="cell">Data22</div> 
      </div> 
      <div class="row"> 
       <div class="cell">HeaderT3</div> 
       <div class="cell">Data31</div> 
       <div class="cell">Data32</div> 
      </div> 
      <div class="row"> 
       <div class="cell">HeaderT4</div> 
       <div class="cell">Data41</div> 
       <div class="cell">Data42</div> 
      </div> 
      <div class="row"> 
       <div class="cell">HeaderT5</div> 
       <div class="cell">Data51</div> 
       <div class="cell">Data52</div> 
      </div> 
      <div class="row"> 
       <div class="cell">HeaderT6</div> 
       <div class="cell">Data61</div> 
       <div class="cell">Data62</div> 
      </div> 
      <div class="row"> 
       <div class="cell">HeaderT7</div> 
       <div class="cell">Data71</div> 
       <div class="cell">Data72</div> 
      </div> 
      <div class="row"> 
       <div class="cell">HeaderT8</div> 
       <div class="cell">Data81</div> 
       <div class="cell">Data82</div> 
      </div> 
      <div class="row"> 
       <div class="cell">HeaderT9</div> 
       <div class="cell">Data91</div> 
       <div class="cell">Data92</div> 
      </div> 
    </div> 

     </div> 
     <div class="right"> 
      <div class="row"> 
       <div class="cell">HeaderTR</div> 
       <div class="cell">DataR1</div> 
       <div class="cell">DataR2</div> 
      </div> 

     </div> 
    </div>