我可以修复第一行div并滚动其他div

时间：2015-11-17 07:57:08

标签： javascript jquery html css

我需要修复第一行div，并需要水平滚动其他div。

这是我目前的div set。

我不知道是否可能。

.content {
  width: 500px;
  height: 450px;
  padding: 10px;
  text-align: left;
  overflow: auto;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.headings {
  display: block;
}
.headings .heading {
  display: inline-block;
  width: 167px;
  height: 42px;
  background: #66ccff;
  color: #fff;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: center;
  line-height: 42px;
}
<div class="content" id="container">
  <div class="headings">
    <div class="heading">12.00pm</div>
    <div class="heading">12:30pm</div>
    <div class="heading">12:00pm</div>
    <div class="heading">11:30am</div>
    <div class="heading">11:00am</div>
    <div class="heading">10:30am</div>
    <div class="heading">10:00am</div>
    <div class="heading">09:30am</div>
  </div>
  <!-- headings -->
  <div class="headings">
    <div class="heading">How is it</div>
    <div class="heading">Next title</div>
    <div class="heading">Next title 01</div>
    <div class="heading">Next title 02</div>
    <div class="heading">Next title 03</div>
    <div class="heading">Next title 04</div>
    <div class="heading">Next title 05</div>
    <div class="heading">Next title 06</div>
  </div>
  <!-- headings -->
  <div class="headings">
    <div class="heading">How is it</div>
    <div class="heading">Next title</div>
    <div class="heading">Next title 01</div>
    <div class="heading">Next title 02</div>
    <div class="heading">Next title 03</div>
    <div class="heading">Next title 04</div>
    <div class="heading">Next title 05</div>
    <div class="heading">Next title 06</div>
  </div>
  <!-- headings -->
  <div class="headings">
    <div class="heading">How is it</div>
    <div class="heading">Next title</div>
    <div class="heading">Next title 01</div>
    <div class="heading">Next title 02</div>
    <div class="heading">Next title 03</div>
    <div class="heading">Next title 04</div>
    <div class="heading">Next title 05</div>
    <div class="heading">Next title 06</div>
  </div>
  <!-- headings -->
  <div class="headings">
    <div class="heading">How is it</div>
    <div class="heading">Next title</div>
    <div class="heading">Next title 01</div>
    <div class="heading">Next title 02</div>
    <div class="heading">Next title 03</div>
    <div class="heading">Next title 04</div>
    <div class="heading">Next title 05</div>
    <div class="heading">Next title 06</div>
  </div>
  <!-- end of content -->
</div>
<!-- end of content -->

我想要的是使每个行的第一行固定，其他行需要水平滚动。请参阅此处发布的我的代码段。

让我知道是否可能。

先谢谢

1 个答案:

答案 0 :(得分：1)

我想你想要这种。

       .content {

            height: 255px;
            padding: 10px;
            text-align: left;
            overflow: auto;
            white-space: nowrap;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .headings {
            display: block;
        }
        .headings .heading {
            display: inline-block;
            width: 150px;
            height: 42px;
            background: #66ccff;
            color: #fff;
            font-weight: 600;
            margin-bottom: 4px;
            text-align: center;
            line-height: 42px;
        }
       .time{position:fixed;z-index:9999}
       .text{margin-left:200px;}

       <div class="content" id="container">
            <div class="headings ">
                <div class="heading time">12.00pm</div>
                <div class="text">
                <div class="heading">12:30pm</div>
                <div class="heading">12:00pm</div>
                <div class="heading">11:30am</div>
                <div class="heading">11:00am</div>
                <div class="heading">10:30am</div>
                <div class="heading">10:00am</div>
                <div class="heading">09:30am</div>
                </div>
            </div>
            <!-- headings -->

            <div class="headings">
                <div class="heading time">How is it</div>
                                <div class="text">
                <div class="heading">Next title</div>
                <div class="heading">Next title 01</div>
                <div class="heading">Next title 02</div>
                <div class="heading">Next title 03</div>
                <div class="heading">Next title 04</div>
                <div class="heading">Next title 05</div>
                <div class="heading">Next title 06</div>
                                    </div>
            </div>
            <!-- headings -->
            <div class="headings">
                <div class="heading time">How is it</div>
                                <div class="text">
                <div class="heading">Next title</div>
                <div class="heading">Next title 01</div>
                <div class="heading">Next title 02</div>
                <div class="heading">Next title 03</div>
                <div class="heading">Next title 04</div>
                <div class="heading">Next title 05</div>
                <div class="heading">Next title 06</div>
                                    </div>
            </div>
            <!-- headings -->
            <div class="headings">
                <div class="heading time">How is it</div>
                                <div class="text">
                <div class="heading">Next title</div>
                <div class="heading">Next title 01</div>
                <div class="heading">Next title 02</div>
                <div class="heading">Next title 03</div>
                <div class="heading">Next title 04</div>
                <div class="heading">Next title 05</div>
                <div class="heading">Next title 06</div>
                                    </div>
            </div>
            <!-- headings -->
            <div class="headings">
                <div class="heading time">How is it</div>
                <div class="text">
                <div class="heading">Next title</div>
                <div class="heading">Next title 01</div>
                <div class="heading">Next title 02</div>
                <div class="heading">Next title 03</div>
                <div class="heading">Next title 04</div>
                <div class="heading">Next title 05</div>
                <div class="heading">Next title 06</div>
                    </div>
            </div>
        </div>
            <!-- end of content -->
        </div>
        <!-- end of content -->
相关问题
最新问题