Center Div scroll

Question

In meinem Code, Innerhalb eines Containers Drei Blöcke werden da sein. man friert auf der linken Seite ein und man friert auf der rechten Seite ein und die andere wird zwischen diesen beiden divs scrollen. Genau wie moderne Gitter. Aber ich möchte das Gitter nicht benutzen.

Ich habe versucht, aber der Mittelblock erhält nicht die horizontale Bildlaufleiste. Ich möchte keinen Bruch des Mittelblocks, stattdessen sollte es horizontal scrollen.

* { 
 
\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

Sie müssen wahrscheinlich Breite zu Ihrem Container hinzuzufügen. Im Moment ist es auf 100% eingestellt, so dass es nicht größer als das Browserfenster ist. Stattdessen könnten Sie so etwas tun:

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

Ich weiß, dass Sie diesen Wert dynamisch ändern müssen, aber hoffentlich bekommt man

Beispiel gestartet: http://codepen.io/nilestanner/pen/jAjbdK

Answer 2

Versuchen mit Zum Beispiel:

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>