css - hyde 生成代码的 TB 流体 div 对齐问题

Question

我有以下 responsive blog archives layout ，它存在对齐问题，但我不确定要针对哪个元素来解决该问题。

在链接jsFiddle example ，调整宽度确实会产生响应式布局，但博客文章列表不会以正确的对齐方式排列。

来自 hyde 静态站点生成器的以下代码似乎放置了多余的 <p>中的标记，我不确定是否需要在那里进行补救，或者一些 CSS 调整是否就足够了。

{% extends "base.j2" %}
{% from "macros.j2" import render_excerpt with context  %}
{% block main %}
{% block page_title %}

<h1 class="title"></h1>

    <div class="page-header">
    <h1>{{ resource.meta.title }}</h1>
    </div>


{% endblock %}


  <div class="row-fluid">

    {% for res in resource.node.walk_resources_sorted_by_time() %}


    {% refer to res.url as post %}

        <div class="span4">
              <a href="{{ content_url(res.url) }}"><h2>{{ res.meta.title }}</h2></a>

    <a href="{{ content_url(res.url) }}" class="postpic">{{ post.image|markdown|typogrify }}</a>

{{ res.meta.excerpt|markdown|typogrify }}

              <p><a class="btn" href="{{ content_url(res.url) }}">View details &raquo;</a></p>
            </div><!--/span-->

    {% endfor %}

          </div><!--/row-->


{% endblock %}

Answer 1

如果你想构建一个网格，最好每 3 个 span4 在另一个下方生成一个新的 row-fluid。例如:

<div class="row-fluid">
   <div class="span12"> //These two row are our flexible container
     / GENERATE WITH YOUR CODE THIS STUCTURE UNDER EVERY 3 POST /
     <div class="row-fluid">
       <div class="span4"></div>
       <div class="span4"></div>
       <div class="span4"></div>
     </div>

我使用 php 来完成它，但我认为这是循环中 html 逻辑结构的一个小错误!