創建水平滾動div的循環

我正在使用jquery，這樣我就可以動態地創建一系列可以水平滾動的div，問題是divs不會滾動水平並且它們往下移動。創建水平滾動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/

代碼爲什麼它不工作？

來源

2014-07-22 Cam Connor

如果你想使其水平，然後有一個表，裏面像

<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; 

    };

來源

2014-07-23 16:24:47 KNC

您希望將#routeContainer的高度和寬度固定爲一些固定值而不是100％，否則它將展開以適應其內容而不是滾動。

您還需要從.test類中刪除float：left，以便divs並排坐在一起，而不是在彼此之下浮動。

這可能是你想要什麼，然後：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，並與多個「世界你好」的div來填充它。你應該只能夠在它下面添加更多。）

來源

2014-07-23 00:18:27 swilson

創建水平滾動div的循環

回答

相關問題