Question

我看过很多关于标题问题的帖子，但是在我的案例中没有这些帖子。我想在每一行中出现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是一个包含从文件夹中检索的图像的数组。

我错过了什么？

Answer 1

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

div {
display: inline-block;
}

希望这能帮到你！

Answer 2

在你的CSS中添加

#divId
{
 float:left;
}

Answer 3

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

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

这里演示（css是内联的，你应该调整并放入css类）

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

Answer 4

的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

并排动态创建div

4 个答案: