並排動態創建div
[英]Dynamically create divs Side by Side
問題描述
我看到了很多與標題問題相關的帖子，但是在我的案例中，沒有一篇有用。 我希望每行顯示3個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是一個數組，其中包含從文件夾中檢索的圖像。
我想念什么？
4 個解決方案
解決方案1
1 2015-01-21 07:06:07
我認為您的問題是這樣的事實，默認情況下，div是css-display：塊的默認值，這意味着，在每個div之后，都將開始新的一行。 因此，我嘗試將其添加到您的CSS中：
div {
display: inline-block;
}
希望這對您有所幫助！
解決方案2
0 2015-01-21 07:10:48
在您的CSS中添加
#divId
{
float:left;
}
解決方案3
0 2015-01-21 07:15:28
如果您希望div位於一行，則可以使用display：inline-block或float：left;
如果要將div放在不同的行上，請使用display：block;
這里的演示（css是內聯的，您應該調整並放入css類中）
[http://jsfiddle.net/ke4nhpkm/1/]
解決方案4
0 已采納 2015-01-21 07:23:21
哎呀！ 實際上，問題在於使用“ panel”元素。 一旦我通過'div'元素對其進行了更改，它就解決了我的問題。
$('#Pardiv').append($("<img style='height:80px;width:80px;float:left;padding:30px;' src= Image/" + images[i] + " />"));
其中Pardiv是包含所有圖像的div
如何使用JavaScript使用循環動態並排附加Divs？
[英]How to append Divs dynamically side by side using javascript using loops?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.