Динамически добавленные элементы не имеют того же положения, что и элементы-братья, которые были вставлены при загрузке страницы.

Question

Таким образом, я загружаю 40 элементов при загрузке страницы, когда пользователь нажимает кнопку, добавляется еще 40 (такие же типы элементов и классы CSS). 40 динамически загруженных элементов имеют меньше пространства между ними, чем первые 40 элементов, загружаемых на загрузку страницы (хотя они не должны, так как они имеют одинаковый стиль). Я не могу заставить их работать, какие-то идеи? Спасибо

Answer 1

Вы должны предоставить фрагмент кода, который имеет отношение к вашей проблеме, чтобы мы могли помочь вам исправить это.

Но я возьму удар в темноте и предположим, что ваши элементы оформлены как inline-block s, что означало бы, что если в вашем HTML-формате между исходно показанными элементами есть пробелы, они будут отображаться как одно пространство () между элементами на странице.

Когда вы создаете динамические элементы на странице (возможно, с помощью JS?), В новой разметке не будет пробелов, что означает, что элементы отображаются рядом друг с другом, а не с пробелом между их.

EDIT: Пример приведен ниже. Разделы внутри #spaced написаны так, как вы обычно пишете HTML; с пробелом, обозначающим иерархическую семантику.

В #together HTML для divs сначала записывается с комментарием HTML вместо пробелов, а во-вторых, ничто в разметке между элементами.

В зависимости от ваших потребностей вы можете использовать float: вместо display:inline-block для своих элементов, если вы не хотите изменять HTML.

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