html - 使 div 可滚动，其中有许多 div 作为列在其中

Question

我想制作如下画面

HTML代码

  <div class="outerDiv">

     <div class="column">

            <div class="row columnName">Column Name 1</div>

            <div class="row value">Value 1</div>

            <div class="row value">Value 2</div>

            <div class="row value">Value 3</div>

            <div class="row value">Value 4</div>

    </div>

    <div class="column">
            <div class="row columnName">Column Name 2</div>

            <div class="row value">Value 1</div>

            <div class="row value">Value 2</div>

    </div>
</div>

外部 div 包含许多 div，因为列和列的宽度将是固定的，但列的高度将根据该列 div 的包含而变化。

我想要外部 div 可滚动。它应该水平滚动以查看所有其他列并垂直滚动以查看是否有任何列的高度超出外部 div

我已经实现了以下 css

.outerDiv{
 width:100%;
 height:100%;
 overflow:auto;
}
.column{
 width:20%;
 height:100%;
 float:left;
 display:inline;
 margin-right:10px;
 }
.row{
 width:100%;
 height:10%;
}
.value{
 font-size:18px;
}

所以问题是，Columns div 正在下降，外部 div 没有水平滚动，verticall sroll 工作正常。请帮助我，我试了一整天:(

JS fiddler :http://jsfiddle.net/Raj_13290/LG8j9/3/

Answer 1

您可以在 .column CSS 类中使用 display:table-cell 并排显示列和 white-space: nowrap; 在 .outerDiv 中在一行中显示列名称(否则它们将被夹在末尾)。

.outerDiv{
   overflow:auto;
   white-space: nowrap;

}
.column{
   width:20%;
   height:100%;
   display:table-cell;
   padding:0 10px 0 0;
}

Example