javascript - jQuery .append() 以错误的方式改变了页面布局

Question

我遇到了一些问题 - 我正在尝试这样做:

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

它显示的内容如下:

...但我希望它显示如下内容: ...如果我从附加中删除 javascript 变量并将其替换为任何旧文本，它就会这样做。

有人知道这是怎么回事吗？

如有必要，这里有更完整的代码版本:

$.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

非常感谢

Answer 1

不太明白为什么会这样，但是如果你把
垂直对齐:顶部；

在 .square 类中，它似乎解决了这个问题。