Question

我有一个有3行的div。我的代码是在bootstrap中。我想将水平滚动条放在第一行下方和剩余的2行上方，即第一行和第二行之间。当我滚动时，所有3行的内容应同时滚动。我怎样才能做到这一点？这是我到目前为止所尝试的

<div id="main-content">
    <div class="row sample_data">
        <div class="row sample_content">
            <div class="col-sm-4 graph_data_heading">Year</div>
            <div class="col-sm-3 time1">Jan'16</div>
            <div class="col-sm-3 time2">Feb'16</div>
            <div class="col-sm-3 time3">Mar'16</div>
            <div class="col-sm-3 time4">Apr'16</div>
        </div>
        <div class="row sample_content">
            <div class="col-sm-4 graph_data_heading">revenue</div>
            <div class="col-sm-3">230</div>
            <div class="col-sm-3">287.5</div>
            <div class="col-sm-3">359.375</div>
            <div class="col-sm-3">449.21875</div>
        </div>
        <div class="row sample_content">
            <div class="col-sm-4 graph_data_heading">Gross Margin</div>
            <div class="col-sm-3">230</div>
            <div class="col-sm-3">287.5</div>
            <div class="col-sm-3">359.375</div>
            <div class="col-sm-3">449.21875</div>
        </div>
    </div>
</div>

CSS：

    #main-content > .row > .row:first-child {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    #main-content > .row > .row {
        overflow: hidden;
        white-space: nowrap;
    }
#main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:none;
    display:inline-block;
    white-space:normal;
    vertical-align:top;
}

请帮帮我。感谢。

Answer 1

溢出：包含元素的auto就足够了：

#main-content > .row{
    float:none;
    display:inline-block;
    overflow: auto;
    vertical-align:top;
}
#main-content > .row > .row{
  white-space: no-wrap;
}

Answer 2

你可以使用这个课程

#main-content > .row > .row:nth-child(2) {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

Answer 3

使用scrollLeft()的{{1}}更改第2和第3个div的滚动位置。

示例代码。

jQuery

工作fiddle

使用单个滚动条滚动2个div的内容

3 个答案: