修改

Question

我有一个普通的HTML页面，其中包含一些彼此间隔很小的框：

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;  
    }
}

我没看到是什么让这些盒子彼此粘在一起？

帮助将不胜感激。

修改

以下是从呈现的浏览器格式（控制台）中复制的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>

问题

有没有人有一个很好的解决方法呢？如何让这些盒子显得正常？任何帮助将不胜感激。

Answer 1

在原始HTML代码中，元素之间有空格。当你构建字符串时，你的元素会一个接一个地显示，而根本没有空格。

添加空格：

imageHTML += '</span> ';

没有空格：http://jsfiddle.net/uwE7X/

空间：http://jsfiddle.net/uwE7X/1/

通过jQuery附加的HTML不会收到保证金

修改

问题

1 个答案: