Question

所以我从javscript动态创建div，然后将它们放入名为＆＃34; wrapper＆＃34;的div中。但是，我的divs都没有了。我使用的系统是这样的：

我有一张带有信息的单卡，我想要创建5次，然后放入另一个持有这种卡的div。我的数组长度是这么多次。

一旦我掌握了所有这些，我就会将持有5张卡片的求职者div添加到包装器div中，但一切都不成功。

我的CSS有什么问题？

 <!doctype html>
    <html>
        <head>
            <meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
            <meta http-equiv="refresh" content="1800">
                <link rel="stylesheet" type="text/css" href="styles/JobDiv.css">
                <script type="text/javascript" src="scripts/JobDiv.js"></script>    
                 <script type="text/javascript" src="scripts/jquery.js"></script>
        </head>
        <body>
            <div class="wrapper12">
            </div>
        </body>
    </html>

.wrapper12{
    display:inline-block;
    top:25%;
    left: 5em;
    overflow:auto;
    position:relative;
}
.boxHold{
    width: 10em;
    height: 10em;
    top : 50%;
    margin: 5em;
    background : red;
    font-size : 10px;
    text-align:center;
    position: relative;
    -moz-user-select:none;
    float:left; 
}
.boxMe{
    width: 100%;
    height:100%;
    top : 25%;
    background : red;
    font-size : 10px;
    text-align:center;
    position: absolute;
    -moz-user-select:none;
}
#boxB{
    width: 15em;
    height: 15em;
    top : 0%;
    left: 60em;
    background : blue;
    font-size : 15px;
    margin: 1em;
    text-align:center;
    position: relative;
    z-index:1;
}
.boxC{
    width: 13em;
    height: 13em;
    top : 0;
    background : yellow;
    font-size : 100%;
    margin: 1em;
    left:5em;
    text-align:center;
    position: absolute;
    -moz-user-select:none;
}

li.item{
    list-style:none;
    padding:5px;
}

ul.prolist{
    list-style-position:inside;
    text-align:center;
}



    var arr;
    var counter = 0;
    var pageBody = document.getElementsByTagName('body');
    var wrapper12 = document.getElementsByClassName('wrapper12');

    window.onload = function(){
        arr=[['638110','2015-12-13',12],['638123','2015-12-15',5],['638124','2015-12-15',2],['638125','2015-12-15',1],['638126','2015-12-15',10],['638127','2015-12-15',7],
        ['638128','2015-12-15',1],['638129','2015-12-15',10],['638130','2015-12-15',7],['638131','2015-12-15',1],['638132','2015-12-15',10],['638133','2015-12-15',7],['638134','2015-12-15',7],['638135','2015-12-15',7]];
        buildInsert();
        buildDiv();
    }
    function createCard(arr)
    {
        var ul = document.createElement('ul');
        ul.setAttribute("class","prolist");

        for(var i=0; i<=arr.length-1;i++)
        {
            var li = document.createElement('li');
            li.setAttribute("class","item")
            li.innerHTML = arr[i];
            ul.appendChild(li);
        }
        return ul;
    }
    function buildDiv(){

        for(var i = 0; i<=arr.length-1;i++){
            counter  = i*150;
            var jobholder = document.createElement('div');
            jobholder.setAttribute("class","boxHold");
            for(var j=10;j>=1;j--){

                var jobdiv = document.createElement('div');
                //var ul = createCard(arr[i]);

                var jobnum = document.createTextNode(arr[i][0] + "\n" + arr[i][1] + "\n" + arr[i][2] );
                jobdiv.setAttribute("class","boxMe");
                jobdiv.setAttribute("id",""+arr[i][0]+" "+j);
                jobdiv.setAttribute("draggable","true");
                jobdiv.setAttribute("ondragstart", "return dragStart(event)");  
                jobdiv.setAttribute("ondrop", "return dragDrop(event)");
                $(jobholder).css({left:counter});
                jobdiv.appendChild(jobnum);
                jobholder.appendChild(jobdiv);
                $(jobholder).appendTo(wrapper12);   

            }
        }
    }

Answer 1

我发现了问题，是我设置了我的左边：计数器＆＃39;在工作人员div上的财产。一旦我删除它，它就有用了。

如何让较小的div包含在一个更大的div中，比如css wrap-text方法？

1 个答案: