使用java、json、ajax和html在一行中显示图像/名称对-当前显示在一列中

我正在尝试使用json显示一些图片，图片下方有它们的名称。我希望图像/名称对彼此相邻。目前他们是一个接一个

HTML:

阿贾克斯：

.done（函数（responseJson1a）{
数据类型：“json”；
//删除现有图像
$（“#img容器”）.find（“img”）.remove（）；
//用于填充图像的JSON响应
$（responseJson1a）.appendTo（$（“#img容器”）；
对于（i=0；i

爪哇：

String json=null；
int i=0；
for（最终青年成员青年成员：青年成员）{
字符串image=youthMember.getphoto（）；
字符串名称=youthMember.getFirstname（）；
如果（i==0）{
json=”“+
“+name+”；
i++；
}否则{
json=json+（“”+
“+name+”）；
}
}

我尝试将“”放在末尾，封装所有图像；但是，这不起作用（图像/字符串对仍然位于单个列中）

当我删除名称“+name+”和开头的”时，图像将一行接一行，直到该行被填充，然后开始新的一行。这是我想要的，除了每个图像下的名称

已更改为（包括style='display:inline；'）-现在图像和名称都是内联的。要在图像下显示名称：

for (final YouthMember youthMember : youthMembers) {
            String image = youthMember.getPhotograph();
            String name = youthMember.getFirstname();
            if (i == 0){
                json = "<div class='input-group'> <img src=" + image + " width='60' alt='captcha image' > " + 
                        "<h4 class='form-line-heading' style='display:inline;'>" + name + "</h4>";
                i++;
            }else{
                json = json + ("<img src=" + image + " width='60' alt='captcha image' >" +
                        "<h4 class='form-line-heading' style='display:inline;'>" + name + "</h4>");
            }
        }
        json = json + "</div>";

for（最终YouthMember YouthMember:youthMembers）{
字符串image=youthMember.getphoto（）；
字符串名称=youthMember.getFirstname（）；
如果（i==0）{
json=”“+
“+name+”；
i++；
}否则{
json=json+（“”+
“+name+”）；
}
}
json=json+“”；

这一变化主要起到了作用（第19幅图）：

String json=null；
int i=0；
for（最终青年成员青年成员：青年成员）{
字符串image=youthMember.getphoto（）；
字符串名称=youthMember.getFirstname（）；
如果（i==0）{
json=”“+
“+name+”；
i++；
}否则{
json=json+（“”+
“+name+”）；
}
}
response.setContentType（“图像/jpeg”）；
响应。setCharacterEncoding（“UTF-8”）；
response.getWriter（）.write（json）；

---

为

添加以下样式：

编辑：

我猜您使用的是引导，因此如果您将
img
和
h4
都包装到另一个div中会更好，如下所示：

<div class="row">
 <!-- your img and h4 go here -->
</div>



如果不使用引导，则每次

或者最好为每个
img
&
h4
几乎都设置
，将名称放在图像后面而不是下面。但是，现在是内联的（例如，图像、名称、图像、名称、图像、名称）。很抱歉，该名称位于列中图像的旁边。我在上面进行了编辑。根据您上次的编辑：使用class='col-md-2'更改class='row'。另外，从h4中删除style='display:inline；'。最初，我误解了您的问题((（请参见编辑。几乎在那里，第19个图像在其自身行中出现问题。另外，当我调整大小并转到第六行的六个图像时，第六行有两个图像，当我转到第六行时，所有图像都在一列中。（即，我不能转到六、五、四、三、二、一个图像-它是六个，然后是一个图像）。
        String json = null;
        int i = 0;
        for (final YouthMember youthMember : youthMembers) {
            String image = youthMember.getPhotograph();
            String name = youthMember.getFirstname();
            if (i == 0){
                json = "<div class='input-group'> <img src=" + image + " width='60' alt='captcha image' > " + 
                        "<h3 class='form-line-heading'>" + name + "</h3> </div>";
                i++;
            }else{
                json = json + ("<img src=" + image + " width='60' alt='captcha image' >" +
                        "<h3 class='form-line-heading'>" + name + "</h3> </div>");
            }
        }

for (final YouthMember youthMember : youthMembers) {
            String image = youthMember.getPhotograph();
            String name = youthMember.getFirstname();
            if (i == 0){
                json = "<div class='input-group'> <img src=" + image + " width='60' alt='captcha image' > " + 
                        "<h4 class='form-line-heading' style='display:inline;'>" + name + "</h4>";
                i++;
            }else{
                json = json + ("<img src=" + image + " width='60' alt='captcha image' >" +
                        "<h4 class='form-line-heading' style='display:inline;'>" + name + "</h4>");
            }
        }
        json = json + "</div>";

    String json = null;
    int i = 0;
    for (final YouthMember youthMember : youthMembers) {
        String image = youthMember.getPhotograph();
        String name = youthMember.getFirstname();
        if (i == 0){
            json = "<div class='col-md-2'> <img src=" + image + " width='60' alt='captcha image' > " + 
                    "<h4 class='form-line-heading'>" + name + "</h4></div>";
            i++;
        }else{
            json = json + ("<div class='col-md-2'> <img src=" + image + " width='60' alt='captcha image' >" +
                    "<h4 class='form-line-heading'>" + name + "</h4></div>");
        }
    }
    response.setContentType("image/jpeg");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);

 style="display:inline;"

<div class="row">
 <!-- your img and h4 go here -->
</div>