javascript - 格式问题(图像大小、对齐方式等)

Question

Javascript

        for (var i = 0; i < data.length; i++) {
        results.html(results.html() + "<div class='resultsImages'><img src='res/" + data[i]["imageURL"] + "'/></div>");
        results.html(results.html() + "<div class='resultsInfo'><h1>" + capitalizeThis(data[i]["title"]) + '</h1></div><br><br>');
    }

    #results>div {
    display: inline-block;
}

CSS

.resultsImages {
    width: 7em;
    height: 7em;
    padding: 2em;
    margin: 2em;
}

图像尺寸比应有的大得多，与图像对应的文本显示在图像上方。此外，div 之间似乎没有中断。建议？ 关于代码的任何其他建议将不胜感激。

Answer 1

使用 max-width 和 max-height 属性来限制图像的大小。 div 之间的中断是正常的，因为默认情况下 div 的 display 属性设置为 block 但您可以通过将其设置为 inline-block

来更改它

.resultsImages{
    max-width: 300px;
    max-height: 300px;
    display: inline-block;
}

.resultsInfo{
    display: inline-block;
}