Question

我正在使用jquery，以便我可以动态创建一系列可以水平滚动的div，问题是div不会水平滚动而且会向下滚动。

这是我的Jquery / html代码

<div id="routeContainer">
  <script type="text/javascript">

      var margin = 0;
      for (var i = 0; i < 5; i++) {
         $("#routeContainer").append("<div style = 'margin-left: " + margin + "px;' class = 'test'>hello world</div>");
         margin += 50;
      };
  </script>
</div>

这是我的CSS

 #routeContainer{
 width:100%;
height:100%;
background-color: #CCC;
-ms-overflow-x: auto;
/* IE8 */
overflow-x: auto;
-ms-overflow-y: hidden;
/* IE8 */
overflow-y: hidden;
display:inline-block;
white-space:nowrap;
}

.test{
width: 150px;
height: 150px;
background-color: #FFF;
position: relative;
float: left;
display: inline-block;
}

这是jsFiddle我改编了我的代码

http://jsfiddle.net/clairesuzy/FPBWr/

为什么它不起作用？

Answer 1

如果你想让它水平，那么在里面有一个表，如

 <div id="routeContainer">
       <table>
          <tr id="routeContainerTR">

          </tr>
       </table>    
 </div>

然后在javascript函数中添加

<script type="text/javascript">

  var margin = 0;

  for (var i = 0; i < 5; i++) {

  $("#routeContainerTR").append("<td><div style = 'margin-left: " + margin +

   "px;' class = 'test'>hello world</div></td>");

  margin += 50;

  };

Answer 2

您希望将#routeContainer的高度和宽度修改为某些固定值而不是100％，否则它会扩展以适应其中的内容而不是滚动。

你还需要从.test类中删除float：left，这样div就会并排放置而不是互相浮动。

这可能是你想要的：http://jsfiddle.net/XasPm/

#routeContainer{
width:500px;
height:180px;
background-color: #CCC;
-ms-overflow-x: auto;
/* IE8 */
overflow-x: auto;
-ms-overflow-y: hidden;
/* IE8 */
overflow-y: hidden;
display:inline-block;
white-space:nowrap;
}

.test{
width: 150px;
height: 150px;
background-color: #FFF;
display: inline-block;
}

（旁白：我不确定你要增加的利润率。你还提到了多个滚动div，但你的代码创建了一个滚动div并用多个“hello world”div填充它。你应该只是能够在它下面添加更多。）

创建水平滚动div的循环

2 个答案: