overflow-x在Jquery中的動態生成的DIV中不起作用？

嗨，大家好我是新來的jQuery和我有兩個懷疑從我的編碼問..overflow-x在Jquery中的動態生成的DIV中不起作用？

這裏是我與我的JQUERY沿XHTML編碼和CSS

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://xmlns.jcp.org/jsf/html"> 
    <h:head> 
     <title>Test</title> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <meta name="viewport" content="width=device-width"/> 
     <style>   
      #filterpanel{ 
       position: absolute; 
       top: 50%; 
       left: 0; 
       width: 99%; 
       height: 20%; 
       background-color: azure; 
       border: 4px solid black; 
       border-radius: 12px; 
       overflow-x: scroll;  
      } 
     </style> 
    </h:head> 
    <h:body> 
     <div id="filterpanel"></div> 
     <script> 
      $(document).ready(function(){ 

       for (var i = 0; i &lt; 6; i++) {  

        var s=$('<div id="filterinfo'+i+'" ><div id="imgclose'+i+'" style="position: absolute; right:0;top: 0;cursor: pointer;" ><img src="images/close.png" width="20px" height="20px"/></div></div>').css({"text-align":"center","background-color":"black","color":"white","position":"relative","width":"16%","height":"98%", "border-radius":"16px","top":"1%","float":"left","left":"0.5%","margin-left":"1%"}); 
        s.appendTo("#filterpanel"); 
        $("imgclose"+i).click(function(){ 
         alert("clicked"); 
         $("filterinfo"+i).hide(); 
        }); 
       } 

      }); 
     </script> 
    </h:body> 
</html>

的事情是我所有的div的是生成的成功與特定的ID的，因爲我需要，但會發生什麼，如果我的價值超過5爲我，生成的div（即）filterinfo6得到顯示在filterinfo1下，而不是filterinfo5在我的主div filterpanel右側，雖然我已經給溢出-x作爲主div的滾動。

我的第二個疑問是，當我點擊imgclose div時，點擊功能不起作用...我真的需要關閉特殊的div（即），如果用戶點擊imgclose4，那麼特定的div filterinfo4應該是從我主要的div filterpanel中刪除....到目前爲止，我所嘗試的是不工作....任何人都可以幫助我這個請。

這裏有一個演示：http://jsfiddle.net/3XwpG/

在此先感謝。

來源

2014-02-12 Vicky

http://jsfiddle.net/3XwpG/ –

@VijayakumarSelvaraj感謝小提琴兄弟更容易讓他們明白我要表達...... – Vicky

的第一件事是filterinfo到變化的CSS：

{ 
    "text-align": "center", 
    "background-color": "black", 
    "color": "white", 
    "display": "inline-block", 
    "width": "16%", 
    "height": "98%", 
    "border-radius": "16px", 
    "margin-left": "1%" 
}

第二件事是你必須定義的#filterpanel的高度，使white-space: nowrap。

#filterpanel{ 
    position: absolute; 
    top: 50%; 
    left: 0; 
    width: 99%; 
    height: 100px; 
    position: relative; 
    background-color: azure; 
    border: 4px solid black; 
    border-radius: 12px; 
    overflow-x: scroll; 
    white-space: nowrap; 
}

DEMO

來源

2014-02-12 11:12:06 ducdhm

你的小提琴被鏈接到原始的，不變的代碼。你忘了按更新嗎？ –

@DarkAshelin更新 – ducdhm