jQuery .append() modifie la mise en page de manière erronée

Question

J'ai un petit problème - j'essaie de faire ceci :

$('#content').append('<div class="square"><h2>'+item.name+'</h2><h3>'+item.comment+'</h3></div>');

et il affiche le contenu comme suit :

...mais je veux qu'il affiche le contenu comme ceci : ...ce qu'il fait si je supprime les variables javascript de l'appendice et que je le remplace par n'importe quel texte.

Quelqu'un sait-il ce qui se passe ?

Voici une version plus complète du code si nécessaire :

$.ajax({ 
      url: 'yourcurations.php', 
      data: '', 
      dataType: 'json', 
      success: function(data){
        $.each(data, function(i, item) {
        $('#content').append('<div class="square"><h2>'+item.name+'</h2><h3>'+item.comment+'</h3></div>');
        })
      }
});

CSS

.square {
    width: 150px;
    height: 150px;
    margin-right:50px;
    margin-bottom: 50px;
    display: inline-block;
    border: 1px solid gray;
}

h2 {
    margin-top: 0;
    font-size: 1.5em;
    color: black;
}

h3 {
    font-size: 1em;
    margin-top: -15px;
    color: gray;
}

HTML

Merci beaucoup

Answer 1

Je ne comprends pas vraiment pourquoi cela fonctionne, mais si vous mettez
vertical-align: top;

dans le .square il semble que le problème soit résolu.

Answer 2

Vous voyez le résultat indésirable parce que l'en-tête est enveloppé dans la boîte, ce qui pousse l'élément suivant vers le bas. Vous pouvez probablement résoudre ce problème en fixant la hauteur des éléments de l'en-tête.