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

不太明白为什么它会起作用，但如果你把
vertical-align: top;

在.square课堂上，它似乎解决了这个问题。

Answer 2

您会看到不需要的结果，因为标题被包裹在将下一个元素向下推一点的框中。您可以通过在标题元素上设置固定高度来修复它。