使用jQuery显示图像

我尝试在一行中显示三个图像。例如，我试图让页面看起来像这样（我手动输入了所有我试图获取的html）：

但是，当我尝试使用jQuery附加图像以尝试使其看起来与上一个屏幕截图中的一样时，它显示如下：

显然，这与我想要的不同

这是我的代码（html和jQuery）

$（'#唱片集名称'）。在（'change'，function（）上{
//从选定的相册中检索图像
$.ajax({
类型：“POST”，
url:“/members/profile/get photos from album”，
数据类型：“json”，
数据：{
相册名称：$（“#相册名称选项：选定”）.val（）
}
}).done（函数（msg）{
如果（msg.photos==未定义）{
$（'#无相册照片。w3 col m12'）.attr（'style'，'display:initial；'）；
$（“#没有相册照片。w3 col m12”）.html（“在相册中找不到照片”
”；
返回false；
}否则{
$（“#相册标题”）.attr（'style'，'display:initial；'）；
$（“#相册标题h4”）.html（“相册名称选项：选定”）中的照片。text（）.split（“#”）[0]+”：”；
$（'.w3行填充.w3页边距顶部'）.attr（'style'，'display:initial；'）；
$。每个（msg.photos，函数（i，项）{
$（'div.w3-third'）。查找（'.w3-card-2'）。追加（'basePath（）。/images/profile/'.$this->identity（）。/albums/'；？>'+$（'#album name option:selected'）。val（）+'/'+msg.photos[i]+''style=“width:100%；”>）；
});
}
}).fail（函数（msg）{
警报（msg）；
});
});

我知道问题在$范围内。每个函数都有，但我不知道如何解决这个问题（在搜索了有关如何完成此任务的任何问题或教程后，但不幸的是没有找到解决方法）

我尝试获取的html如下所示：

<div class="w3-row padding w3-margin-top">
    <div class="w3-third">
        <div class="w3-card-2">
           <!-- image here -->
        </div>
    </div>

    <div class="w3-third">
        <div class="w3-card-2">
           <!-- image here -->
        </div>
    </div>

    <div class="w3-third">
       <div class="w3-card-2">
           <!-- image here -->
       </div>
    </div>
</div> 
<!-- after 3 in a row -->
<!-- make a new row -->
<div class="w3-row padding w3-margin-top">
    <div class="w3-third">
        <div class="w3-card-2">
           <!-- image here -->
        </div>
    </div>

    <div class="w3-third">
        <div class="w3-card-2">
           <!-- image here -->
        </div>
    </div>

    <div class="w3-third">
       <div class="w3-card-2">
           <!-- image here -->
       </div>
    </div>
</div> 

任何帮助都将不胜感激。如果需要更多信息，我可以尝试发布更多

谢谢

尝试使用$.each函数更新该行。看起来是这样的 在div.w3-third中循环，而不是在div.w3-row中循环

设置图像包装的高度

    .w3-card-2 {
       height: 240px;
       margin-bottom: 15px;
    }

或

---

希望这有帮助。

您正在堆叠您的

DIV，它将创建列，因此您的代码工作正常，是您的HTML出错。您可以使用
float:left
来完成此操作

<div class="w3-row padding w3-margin-top">
    <div class="w3-third" style="float: left">
        <div class="w3-card-2">
           Image1
        </div>
    </div>

    <div class="w3-third" style="float: left">
        <div class="w3-card-2">
           Image2
        </div>
    </div>

    <div class="w3-third" style="float: left">
       <div class="w3-card-2">
           Image3
       </div>
    </div>
</div> 

你确定你的服务器没有三次返回相同的照片名称吗？因为每个循环表面看起来都正常。你提到你想要行，但你堆叠
div的方式将生成列，这是你得到的正确结果。不，它返回的是所有图像@ADyson@CesarBielich我不知道怎么弄到它有行。我试过了，这是比我的输出更好的输出，但我试着做这样的事情：看起来你的图像有不同的高度，这将实现这一点。你想要它们都相同的大小吗？是的，我想要它们都相同的大小。我以前做过，类会相应地调整图像，但我想要三个e一行（或一行），然后转到另一行（如下所示）然后你需要设置
最大高度：200px
或任何小于最短图像最大高度的数字。我编辑了代码，结果更好：但是你看到一些图像没有底部边距空间了吗？我想解决这个问题是的，看起来比我的图像好很多，但我试图让它看起来像这样：in与此不同的是，让它看起来像中的一个，是它在一行中有三个w3第三列，然后它生成了一个新行。这有助于更好地解释它吗？这意味着你必须在css中为图像包装器和/或图像本身设置最小高度或高度。我已经更新了这个效果的答案。你认为呢你知道为什么前两个图像的间距正确，而其他图像的间距不正确吗？如果你能看到前两个图像在第二行下面有正确的空间，但其余的没有。你知道吗？是的，这是因为3个图像的宽度超过了主分区的宽度。我更新了代码，但它会留下正确的空间，你必须更正它
.w3-third {
     width: 33.3%;
     float: left;
 }

    .w3-card-2 {
       height: 240px;
       margin-bottom: 15px;
    }

.w3-card-2, .w3-card-2 img {
       height: 240px;
}

<div class="w3-row padding w3-margin-top">
    <div class="w3-third" style="float: left">
        <div class="w3-card-2">
           Image1
        </div>
    </div>

    <div class="w3-third" style="float: left">
        <div class="w3-card-2">
           Image2
        </div>
    </div>

    <div class="w3-third" style="float: left">
       <div class="w3-card-2">
           Image3
       </div>
    </div>
</div> 

.w3-third {
    float: left;
    max-height: 200px;
}
img {
    max-height: 150px;
    padding-bottom: 10px;
}

.w3-third {
float: left;
width:30%;
max-height: 200px;
pading:0;
}
img {
width:100%;
margin-left:0;
margin-right:0;
max-height: 150px;
padding-bottom: 10px;
}