如何讓更小的div包裝在更大的div裏面，比如css wrap-text方法？

所以我從javscript動態創建div，然後將它們放到一個名爲「包裝器」的div中。但是，我的div都完全沒有用。我使用的系統是這樣的：如何讓更小的div包裝在更大的div裏面，比如css wrap-text方法？

我有1張單卡與信息，我想創建5次，然後放入另一個保存這種卡在一起的股利。我這樣做的次數與我的數組長度一樣多。

一旦我將所有持有5張卡的jobholder 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); 

      } 
     } 
    }

來源

2015-12-18 ali aslam

我發現問題，這是我在jobholder div上設置我的'left：counter'屬性。一旦我刪除它，它的工作。

來源

2015-12-18 21:17:40

如何讓更小的div包裝在更大的div裏面，比如css wrap-text方法？

回答

相關問題