并排动态创建div

时间:2015-01-21 07:00:23

标签: javascript jquery html css

我看过很多关于标题问题的帖子,但是在我的案例中没有这些帖子。 我想在每一行中出现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 个答案:

答案 0 :(得分:1)

我认为你的问题是这样的事实,divs默认是css-display:block,这意味着,在每个div之后,会开始一个新行。所以我会尝试将此添加到您的CSS中:

div {
display: inline-block;
}

希望这能帮到你!

答案 1 :(得分:0)

在你的CSS中添加

#divId
{
 float:left;
}

答案 2 :(得分:0)

如果你想让div在一行中,那么使用display:inline-block OR float:left;

如果你想在不同的行上使用div,那么使用display:block;

这里演示(css是内联的,你应该调整并放入css类)

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

答案 3 :(得分:0)

的Heck!实际上问题在于使用&#39; panel&#39;元件。我一改变它就被&#39; div&#39;它解决了我的问题。

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

其中Pardiv是包含所有图像的div