並排動態創建div

我看過很多關於題目問題的帖子，但其中沒有一篇適用於我的案例。我想3周的div出現在每一行中，但下面的代碼獲取每個DIV澆鑄在一個垂直的新線：並排動態創建div

JQuery的

  $(document).ready(function() { 
      $.ajax({ 
       url: "Image/", 
       success: function(data) { 
        var el = $('<div></div>'); 
        el.html(data); 
        var imgArr = $('a', el); 
        var images = []; 

        $.each(imgArr, function(i, val) { 
         images[i] = val.href.replace(window.location.host, "").replace("http:///", ""); 
         if ($.inArray(images[i].split('.').pop(), ["gif", "png", "jpeg"]) != -1) 

         $('#Panel1').append('<div id="divId"' + i + ' style="height:80px;width:80px;float:left;background-image:url(\'Image/' + images[i] + '\');"></div>'); 
        }); 
       } 
      }); 
     } 
     );

HTML

<body> 
     <asp:Panel ID="Panel1" runat="server" CssClass="centeredPanel"> 
     </asp:Panel> 
</body>

CSS

 .centeredPanel 
    { 
     width:25%; 
     height:50%; 
     position:absolute; 
     left:37.5%; 
     top:25%; 
    }

imgArr是含有從文件夾中檢索到的圖像的陣列。

我錯過了什麼？

來源

2015-01-21 Sadiq

是什麼面板，如果面板是您行嘗試HTML（）方法來代替追加即的股利。 $（'＃Panel1'）。html（） – Chetan 2015-01-21 07:03:36

小提琴可能會更好。 – Akshay 2015-01-21 07:05:15

哎呀！其實問題在於使用「面板」元素。只要我通過'div'元素改變它，它就解決了我的問題。

$('#Pardiv').append($("<img style='height:80px;width:80px;float:left;padding:30px;' src= Image/" + images[i] + " />"));

其中Pardiv是包含所有圖像

來源

2015-01-21 07:23:21 Sadiq

我認爲你的問題是事實，divs是默認的css-display：block，也就是說，在每個div之後，會開始一個新行。所以我會嘗試添加到您的CSS：

div { 
display: inline-block; 
}

希望這可以幫助你！

來源

2015-01-21 07:06:07 hallole

不，不是問題。我已經用img元素替換了div，但那也沒用。 $（'＃Panel1'）。append（$（「」））; – Sadiq 2015-01-21 07:08:45

和內聯塊？ – hallole 2015-01-21 07:10:29

我嘗試了inline-block，inline，float ...都沒有工作 – Sadiq 2015-01-21 07:14:13

在你的CSS添加

#divId 
{ 
float:left; 
}

來源

2015-01-21 07:10:48 Dalvik

如果你想的div是在一條線然後可以使用display：inline-block的或浮動：左;

如果你想要div在不同的線上，那麼使用display：block;這裏

演示（CSS是內聯，你應該調整，並把在CSS類）

[http://jsfiddle.net/ke4nhpkm/1/]

來源

2015-01-21 07:15:28 kheya

並排動態創建div

回答

相關問題