動的に追加された要素は、ページロード時に挿入された兄弟要素と全く同じ位置にありません

Question

したがって、ユーザーがボタンを押したときに40個の要素を読み込み、別の40個の要素が追加されます）。動的に読み込まれた40個の要素は、ページの読み込み時に読み込まれた最初の40個の要素よりもスペースが少なくなります（同じスタイリングがあるためではありません）。私は彼らに仕事をさせることはできません。 ありがとう

Answer 1

あなたの問題に関連するコードスニペットを提供することで、問題を解決することができます。

しかし、私は暗闇の中で刺しゅうをして、あなたの要素がinline-blockのようにスタイルされていると仮定します。これは、最初に表示された要素の間にHTMLに空白がある場合、 （）をページ上の要素間に挿入します。

ページに動的要素を作成すると（おそらくJS？と）、新しいマークアップに空白がなくなります。つまり、要素が間にスペースを入れずにすぐ隣に表示されます。それら。

EDIT：以下に示す例。 #spaced内のdivは通常HTMLのように書かれています。空白は階層的意味を示します。

#togetherでは、divのHTMLは空白ではなくHTMLコメントで最初に書き込まれ、次に要素間のマークアップには何も書き込まれません。

必要に応じて、HTMLを変更したくない場合は、display:inline-blockの代わりにfloat:を使用することをお勧めします。

.ib 
 
{ 
 
    width: 5em; 
 
    height: 5em; 
 
    background: #123; 
 
    display: inline-block; 
 
}

<div id='spaced'> 
 
    <div class='ib'> 
 
    </div> 
 
    <div class='ib'> 
 
    </div> 
 
    <div class='ib'> 
 
    </div> 
 
</div> 
 
<div id='together'> 
 
    <div class='ib'> 
 
    </div><!-- 
 
--><div class='ib'> 
 
    </div><div class='ib'> 
 
    </div> 
 
</div>