溢出-x无法在Jquery中动态生成的DIV中工作？

Question

嗨，大家好，我是jquery新手，我对我的编码有两个疑问。

这是我的XHTML编码以及JQUERY和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下方，而不是我的主div中的filterinfo5右侧filterpanel，尽管我给了溢出-x作为主要div的滚动。

我的第二个疑问是，当我单击imgclose div时，单击功能不起作用...我真的需要关闭特定的div（即，如果用户单击imgclose4，则应从我的主面板中删除特定的div filterinfo4 div filterpanel ....到目前为止，我尝试过的方法无法正常工作..任何人都可以帮我这个忙。

这是一个演示： http : //jsfiddle.net/3XwpG/

提前致谢。

Answer 1

首先是将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;
}

演示

Answer 2

正如我们在聊天中讨论的那样，您应该添加white-space: nowrap; 到父级 您可能还在寻找overflow-y: hidden;的结果overflow-y: hidden;

最后，您应该避免使用内联CSS。 请参阅下面的小提琴以获得“干净”版本。

小提琴： http : //jsfiddle.net/3XwpG/9/

溢出-x无法在Jquery中动态生成的DIV中工作？

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-02-12 11:12:06

解决方案2
1 2014-02-12 11:19:17

溢出-x无法在Jquery中动态生成的DIV中工作？

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-02-12 11:12:06

解决方案2 1 2014-02-12 11:19:17

解决方案1
2 已采纳 2014-02-12 11:12:06

解决方案2
1 2014-02-12 11:19:17