并排动态创建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

回答

相关问题