1

3列のdivコンテナがあり、Jekyllにすべての投稿を入力させたいとします。Liquid構文は表示limitされますが、3番目のブログごとに以下のdivコンテナーを追加する方法がわかりません。これは可能ですか?

9つの投稿があるとしましょう。3行のの3列が表示されcolumn-containerます。

{% for post in site.posts %}

<div class="column-container">

   <!-- col 1 -->
   <div class="column">
      <p>1 {{ post.title }}</p>   
   </div>

   <!-- col 2 -->
   <div class="column">
      <p>2 {{ post.title }}</p>   
   </div>

   <!-- col 3 -->
   <div class="column">
      <p>3 {{ post.title }}</p>   
   </div>

</div>

{% endfor %}
4

1 に答える 1

1

サイクルフィルターを使ってこういうことをしてみてはいかがでしょうか。

{% for post in site.posts %}

<div class="column-container">

  <div class="column {%cycle 'col1', 'col2', 'col3'%}">
    <p>1 {{ post.title }}</p>   
  </div>

</div>

{% endfor %}

次に、CSSを使用してスタイルを設定します。

.column { float: left }
.col1 { clear: left } 

jsfiddleのhtmlを参照してください

于 2012-07-24T07:09:04.133 に答える