У меня есть нормальный HTML-страница, которая содержит некоторые коробки, которые имеют небольшой запас друг от друга:HTML добавляется через JQuery не получает маржу

With margin

Когда пользователь прокручивает вниз, страница автоматически загружает больше изображений с помощью AJAX и добавляет больше коробок на страницу, но они приклеены друг к другу:

Without margin

они на самом деле имеют один и тот же HTML, и они не должны смотреть, как го в. Это HTML коробки, которая поставляется непосредственно со страницей:

<div class="images inner"> 
{% for image in S_IMAGES %} 
<span class="image{% if loop.last %} last-box{% endif %}"> 
    <div class="close" aria-hidden="true">&times;</div> 
    <section class="row"> 

      <div class="col-lg-12 center upload-output"> 
       <br /><br /> 

       <div class="img-container"> 
        <div class="helper"></div> 
        <a href="{{ S_IMAGES_PATH }}{{ image.image_name }}.{{ image.image_extension }}" class="lightview" data-lightview-group="images"> 
         <img src="{{ S_THUMBS_PATH }}{{ image.image_name }}.{{ image.image_extension }}" class="img-thumbnail"> 
        </a> 
       </div> 
      </div> 

    </section> 
    <hr /> 
    <div role="form"> 
     <div class="form-group"> 
      <div class="input-group input-group-sm"> 
       <input type="text" class="form-control" onclick="this.select();" value="{{ S_WEB_PATH }}image/{{ image.image_name }}" readonly> 
       <span class="input-group-addon">View</span> 
      </div> 
      <div class="input-group input-group-sm"> 
       <input type="text" class="form-control" onclick="this.select();" value="{{ S_IMAGES_PATH }}{{ image.image_name }}.{{ image.image_extension }}" readonly> 
       <span class="input-group-addon">Direct</span> 
      </div> 
      <div class="input-group input-group-sm"> 
       <input type="text" class="form-control" onclick="this.select();" value="{{ S_THUMBS_PATH }}{{ image.image_name }}.{{ image.image_extension }}" readonly> 
       <span class="input-group-addon">Thumb</span> 
      </div> 
     </div> 
    </div> 
</span> 
{% else %} 

{% endfor %} 
</div>

И это, как я добавить дополнительные коробки с JQuery:

for (var key in response.images) 
{ 
    var image = response.images[key]; 

    var imageHTML = '<span class="image' + ((imagesLength == key) ? ' last-box' : '') + '">'; 
    imageHTML += '<div class="close" aria-hidden="true">&times;</div>'; 
    imageHTML += '<section class="row">'; 
    imageHTML += '<div class="col-lg-12 center upload-output">'; 
    imageHTML += '<br /><br />'; 
    imageHTML += '<div class="img-container">'; 
    imageHTML += '<div class="helper"></div>'; 
    imageHTML += '<a href="' + generate_site_url() + 'store/i/' + image.image_name + '.' + 
        image.image_extension + '" class="lightview">'; 
    imageHTML += '<img src="' + generate_site_url() + 'store/t/' + image.image_name + '.' + 
        image.image_extension + '" class="img-thumbnail" />'; 
    imageHTML += '</a>'; 
    imageHTML += '</div>'; 
    imageHTML += '</div>'; 
    imageHTML += '</section>'; 
    imageHTML += '<hr />'; 
    imageHTML += '<div role="form">'; 
    imageHTML += '<div class="form-group">'; 
    imageHTML += '<div class="input-group input-group-sm">'; 
    imageHTML += '<input type="text" class="form-control" onclick="this.select();" value="' + generate_site_url() + 'image/' + image.image_name + '" readonly>'; 
    imageHTML += '<span class="input-group-addon">View</span>'; 
    imageHTML += '</div>'; 
    imageHTML += '<div class="input-group input-group-sm">'; 
    imageHTML += '<input type="text" class="form-control" onclick="this.select();" value="' + generate_site_url() + 'store/i/' + image.image_name + '.' + image.image_extension + '" readonly>'; 
    imageHTML += '<span class="input-group-addon">Direct</span>'; 
    imageHTML += '</div>'; 
    imageHTML += '<div class="input-group input-group-sm">'; 
    imageHTML += '<input type="text" class="form-control" onclick="this.select();" value="' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" readonly>'; 
    imageHTML += '<span class="input-group-addon">Thumb</span>'; 
    imageHTML += '</div>'; 
    imageHTML += '</div>'; 
    imageHTML += '</div>'; 
    imageHTML += '</span>'; 

    $('.images').append($(imageHTML)); 
    $('.image').slideDown('fast'); 
}

МЕНЬШЕ такой коробке:

span.image { 
    padding: 15px; 
    width: 271px; 
    height: auto; 
    display: inline-block; 
    border: 1px solid @lighten; 
    background-color: lighten(@lighten, 6%); 
    overflow: hidden; 
    cursor: default; 
    position: relative; 

    @media (max-width: 1200px){ 
     width: 296px; 
    } 

    @media (max-width: 992px){ 
     width: 336px; 
    } 

    @media (max-width: 768px){ 
     width: 432px; 
    } 

    .img-container { 
     width: 130px; 
     height: 130px; 
     margin: 0 auto; 
     overflow: hidden; 
     border-radius: 4px; 
     /* background-color: lighten(@light-grey, 10%); 
     padding: 5px; 
     border: 1px solid @light-grey; */ 

     .helper { 
      display: inline-block; 
      height: 100%; 
      vertical-align: middle; 
     } 
    } 

    .close { 
     position: absolute; 
     top: 8px; 
     right: 8px; 
     cursor: pointer; 
     z-index: 500; 
     width: 16px; 
     height: 16px; 
    } 

    img { 
     max-width: 125px; 
     max-height: 125px; 
    } 
}

Что я не вижу, что делает эти коробочки друг на друга?

Справка будет принята с благодарностью.

EDIT

Вот HTML, который был скопирован из формата визуализации браузера (консоли):

<span class="image" style=""> 
    <div aria-hidden="true" class="close">×</div> 
    <section class="row"> 

      <div class="col-lg-12 center upload-output"> 
       <br><br> 

       <div class="img-container"> 
        <div class="helper"></div> 
        <a data-lightview-group="images" class="lightview" href="http://localhost/imgzer/store/i/e9K7P8V3z6o4.jpg"> 
         <img class="img-thumbnail" src="http://localhost/imgzer/store/t/e9K7P8V3z6o4.jpg"> 
        </a> 
       </div> 
      </div> 

    </section> 
    <hr> 
    <div role="form"> 
     <div class="form-group"> 
      <div class="input-group input-group-sm"> 
       <input type="text" readonly="" value="http://localhost/imgzer/image/e9K7P8V3z6o4" onclick="this.select();" class="form-control"> 
       <span class="input-group-addon">View</span> 
      </div> 
      <div class="input-group input-group-sm"> 
       <input type="text" readonly="" value="http://localhost/imgzer/store/i/e9K7P8V3z6o4.jpg" onclick="this.select();" class="form-control"> 
       <span class="input-group-addon">Direct</span> 
      </div> 
      <div class="input-group input-group-sm"> 
       <input type="text" readonly="" value="http://localhost/imgzer/store/t/e9K7P8V3z6o4.jpg" onclick="this.select();" class="form-control"> 
       <span class="input-group-addon">Thumb</span> 
      </div> 
     </div> 
    </div> 
</span>

И это еще одна коробка с консоли, но будет добавлен позже через AJAX :

<span class="image" style=""> 
    <div aria-hidden="true" class="close">×</div> 
    <section class="row"> 
     <div class="col-lg-12 center upload-output"> 
      <br><br> 
      <div class="img-container"> 
       <div class="helper"></div> 
       <a class="lightview" href="http://localhost/imgzer/store/i/l1I6a4Z1u9L7.jpg"> 
        <img class="img-thumbnail" src="http://localhost/imgzer/store/t/l1I6a4Z1u9L7.jpg"> 
       </a> 
      </div> 
     </div> 
    </section> 
    <hr> 
    <div role="form"> 
     <div class="form-group"> 
      <div class="input-group input-group-sm"> 
       <input type="text" readonly="" value="http://localhost/imgzer/image/l1I6a4Z1u9L7" onclick="this.select();" class="form-control"> 
       <span class="input-group-addon">View</span> 
      </div> 
      <div class="input-group input-group-sm"> 
       <input type="text" readonly="" value="http://localhost/imgzer/store/i/l1I6a4Z1u9L7.jpg" onclick="this.select();" class="form-control"> 
       <span class="input-group-addon">Direct</span> 
      </div> 
      <div class="input-group input-group-sm"> 
       <input type="text" readonly="" value="http://localhost/imgzer/store/t/l1I6a4Z1u9L7.jpg" onclick="this.select();" class="form-control"> 
       <span class="input-group-addon">Thumb</span> 
      </div> 
     </div> 
    </div> 
</span>

Вопрос

У кого-нибудь есть обходное решение для этого? Как заставить эти окна выглядеть нормально? Любая помощь будет оценена по достоинству.

источник

2014-02-06 Aborted

Используйте консоль и проверить элементы, чтобы увидеть, где стили приходят из – adeneo

сообщения тонированного HTML. – j08691

Держитесь. Публикация HTML непосредственно с консоли ... – Aborted

В исходном HTML-коде у вас есть пробелы между вашими элементами. Когда вы строите строку, ваши элементы сразу становятся один за другим без места.

Добавить пробел:

imageHTML += '</span> ';

Нет пространства: http://jsfiddle.net/uwE7X/

Площадь: http://jsfiddle.net/uwE7X/1/

источник

2014-02-08 17:26:13

Я чувствую себя настолько слепым. Благодарю. – Aborted

HTML добавляется через JQuery не получает маржу

EDIT

Вопрос

ответ

Смежные вопросы