Question

我试图创建一个水平滚动框来创建一个“时间轴”效果...但我似乎无法让它水平滚动，而不是显示的垂直滚动条......想法？

#container{
     width:500px;
     height:250px;
     border:1px solid #cc61b8;
     overflow:auto;
}

.container-bits{
    width:250px;
    height:498px;
    float:left;
}

<div id="container">
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
</div>

Answer 1

您的#container内需要第二个容器，其宽度为.container-bits，以便它们不会换行：

#container{
     width:500px;
     height:250px;
     border:1px solid #cc61b8;
     overflow:auto;
}
#container2{
     width:10000px;          // just an example
}

.container-bits{
    width:250px;
    height:498px;
    float:left;
}

<div id="container">
  <div id="container2">
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
  </div>
</div>

CSS水平滚动框

1 个答案: