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;
}

格式化问题（图像大小，对齐等）

1 个答案: