2

少し問題があります-これをやろうとしています：

$('#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

http://i.imgur.com/yG1UWja.png?1

どうもありがとう

4

2 に答える 2

1

なぜそれが機能するのかはよくわかりませんが、
vertical-align: top;

クラスでは.square、問題を解決しているようです。

于 2013-04-15T10:59:18.430 に答える
0

見出しがボックスにラップされ、次の要素が少し押し下げられるため、望ましくない結果が表示されます。見出し要素に固定の高さを設定することで、おそらく修正できます。

于 2013-04-15T10:44:19.760 に答える