フォーマットの問題（画像サイズ、配向等）

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

画像サイズは、それがあるべきよりもずっと大きい、及び画像に対応するテキストは、上に現れ画像。また、部門間には休憩がないようです。提案？ コードに関する他の提案があれば幸いです。

Answer 1

max-widthとmax-heightプロパティを使用して画像のサイズを制限します。デフォルトでdivがblockに設定さdisplay性質を持っていますが、inline-block

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

.resultsInfo{ 
    display: inline-block; 
}