为什么html代码字符串通过json传到前台后，有些地方布局乱了。

我在django的视图函数里渲染一个模板文件得到一个html代码格式的字符串，然后通过json传到前台，但是有些地方布局却乱掉了，具体情况如下：

views.py

def post_ajax(request):
    TOTLE = 5
    OFFSET = int(request.GET.get('offset', 0))
    END = OFFSET + TOTLE

    if OFFSET + 1 >= Post.objects.count():
        LOADED = "已经全部加载完毕"
        return HttpResponse(LOADED)
    posts = Post.objects.filter(pub_time__lte=timezone.now())[OFFSET:END]

    for post in posts:
        t = get_template('blog/ajax_post.html')#获取模板
        html = t.render(Context({'post': post}))#手动渲染模板
        print(html)#此时输出结果是正确的
        json_list.append({
            'html': html,
        })#将渲染后的html格式代码字符串加入列表
    data = json.dumps(json_list)#转换为json格式传到前台
    return HttpResponse(data, content_type="application/json")

模板文件代码如下：

ajax_post.htm

<div class="card white lighten-2">
    <div class="card-content teal-text">

        <div class="row">
            <div class="col s10 m10">
                <a href={% url 'blog:detail' post.id %}><span class="card-title">{{ post.title }}</span></a>
            </div>
            <div class="col s1 m1">
                {% if post.topped %}
                    <div class="badge teal white-text">置顶</div>
                {% endif %}
            </div>
            <div class="col s1 m1">
                {% if post.essential %}
                    <div class="badge red white-text">精华</div>                  
                {% endif %}
            </div>
        </div>
        {% load md %}
        {% if post.abstract %}
            <p>{{ post.abstract }}</p>
        {% else %}
            <div>{{ post.body|truncatechars:108|custom_markdown }}</div>
        {% endif %}
    </div>
    <div class="card-action">
        <span>{{ post.views }}阅读</span>&nbsp;&nbsp;&nbsp;
        <span class="ds-thread-count" data-thread-key="{{ post.id }}" data-count-type="comments"></span>&nbsp;&nbsp;&nbsp;
        <span>{{ post.likes }}喜欢</span>&nbsp;&nbsp;&nbsp;
        <span>时间：{{ post.pub_time|date:'Y-m-d' }}</span>&nbsp;&nbsp;&nbsp;
        <a class="right waves-effect waves-light btn" href={% url 'blog:detail' post.id %}>阅读全文</a>
    </div>
</div>

在视图函数中我打印了渲染后的html字符串，渲染是正确的，但是通过json传到前台后html字符串就乱了，出错的两行关键代码如下：

<a href={% url 'blog:detail' post.id %}><span class="card-title">{{ post.title }}</span></a>
<a class="right waves-effect waves-light btn" href={% url 'blog:detail' post.id %}>阅读全文</a>

注意到标签是位于标签里面的，但通过json传到前台后变成了这样：

<a href='post/4'></a><span class="card-title">{{ post.title }}</span>
<a class="right waves-effect waves-light btn" href='post/4'></a>阅读全文

标签跑到了标签外面了。难道是字符串转换成json格式后出了错么？为什么会出现这样的现象？