div中的水平滚动 [英] horizontal scroll in div

问题描述

嗨朋友，



如何设置水平滚动，当我点击添加新列按钮时动态添加n列。我也使用overflow-x：scroll，overflow-y：隐藏但不工作。请任何人帮助我。谢谢你的回复。

 script 
 $（document）.ready（function （）{
 var id = 1; 
 $（＃aBAddClnBtn）。click（function（）{
 var newdiv =<   div     id   =   divColumn    +     id     +       样式  ='  border：solid 1px grey; width：15％;' >  <   div     id   =   divHeader    +  < span class =code-attribute>   id     +        style   ='  border：solid 1px grey;高度：50px;' >  & nbsp;  <   / div  >  <   div     id   =   divData    +     id     +          style   ='  border：solid 1px grey;高度：445像素;' >  & nbsp;  <   / div  >  <   / div  > ; 
 $（newdiv）。 css（float，left）。appendTo（＃divContent）; 
 id ++; 
}）; 
}）; 
 
 html code 
 <   div     id   =  divContent    class   = 返回    style   =  b顺序：实心3px灰色;身高：500px; width：auto; overflow-x：scroll; overflow-y：visible; >  
 <   / div  >  

解决方案

（document）.ready（function（）{
var id = 1;

（＃aBAddClnBtn）。click（function（）{
var newdiv =< div < span class =code-attribute> id = divColumn + id + style =' border：solid 1px grey;宽度：15％;' > < div id = divHeader + id + 样式 =' border：solid 1px grey;高度：50px;' > & nbsp; < / div > < div id = divData + id + style =' border：solid 1px grey;高度：445像素;' > & nbsp; < / div > < / div > ;

< blockquote>（newdiv）.css（float，left）。appendTo（＃divContent）;
id ++;
}）;
}）;

html代码
< div id = divContent class = 返回 style = <跨度class =code-keyword> border：solid 3px grey;身高：500px; width：auto; overflow-x：scroll; overflow-y：visible; >
< / div >

Hi Friends,

how to set the horizontal scroll while i click add new column button it dynamically add the n number of columns. i also used the overflow-x: scroll,overflow-y:hidden but not working .please any one help me. thanks for your reply.

script
$(document).ready(function() {
var id = 1;
$("#aBAddClnBtn").click(function() {
var newdiv = "<div id=divColumn" + id + " style='border:solid 1px gray; width:15%;'><div id=divHeader" + id + " style='border: solid 1px gray; height: 50px;'>&nbsp;</div> <div id=divData" + id + "  style='border: solid 1px gray; height: 445px;'>&nbsp;</div></div>";
 $(newdiv).css("float", "left").appendTo("#divContent");
  id++;
});
});

html code
<div id="divContent" class="back" style="border: solid 3px gray; height: 500px; width: auto;overflow-x: scroll; overflow-y: visible;">
</div>

解决方案

(document).ready(function() { var id = 1;

("#aBAddClnBtn").click(function() { var newdiv = "<div id=divColumn" + id + " style='border:solid 1px gray; width:15%;'><div id=divHeader" + id + " style='border: solid 1px gray; height: 50px;'>&nbsp;</div> <div id=divData" + id + " style='border: solid 1px gray; height: 445px;'>&nbsp;</div></div>";

(newdiv).css("float", "left").appendTo("#divContent"); id++; }); }); html code <div id="divContent" class="back" style="border: solid 3px gray; height: 500px; width: auto;overflow-x: scroll; overflow-y: visible;"> </div>

这篇关于div中的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！