1

私は次のレスポンシブ ブログ アーカイブ レイアウトを持っています。これは配置の問題に悩まされていますが、問題を解決するためにどの要素をターゲットにするべきかわかりません。

リンクされたjsFiddle の例では、幅を調整するとレスポンシブ レイアウトが生成されますが、ブログ投稿のリストは適切に配置されません。

以下の 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 %}
4

1 に答える 1

1

グリッドを構築したい場合は、3 つのスパン 4 ごとに、他の行の下に新しい行流体を生成するのが最適です。例えば：

<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の論理構造のサイクルにおける小さなエラーだと思います!

于 2013-06-23T08:30:52.037 に答える