어떻게 장고 템플릿에 열로 UL (리)을 분할하는?

Question

는 I 장고 템플릿 생성 부 UL 가지고

<ul> 
    {% for item in items %} 
     <li>{{ item.name }}</li> 
    {% endfor %} 
</ul> 

및 I는, 예를 들면 (10 개) 요소를 포함하는 열로 나눌. 어떻게해야합니까?

Answer 1

은 내가 예를 들어 10 개 요소를 포함하는 컬럼에 그것을 나눌. 어떻게해야합니까?

는 "10 열로 분할"또는 "더 이상 10 행 각을 포함하지 않는, N 열로 분할"을 의미 했습니까? 수평 칸이 제한되기 때문에 컬럼의 수를 고정시키는 것이 더 좋습니다. 어느 쪽이든, 당신과 같이, 사용자 정의 템플릿 태그로이 작업을 수행 할 수 있습니다 당신이 Django's Custom Template tags에 익숙하다면

는

from django import template 
from itertools import chain, izip 
import math 

register = template.Library() 

@register.tag 
def colgroup(parser, token): 
    """ 
    Usage:: {% colgroup items into 3 cols as grouped_items %} 

    <table border="0"> 
     {% for row in grouped_items %} 
     <tr> 
      {% for item in row %} 
      <td>{% if item %}{{ forloop.parentloop.counter }}. {{ item }}{% endif %}</td> 
      {% endfor %} 
     </tr> 
     {% endfor %} 
    </table> 

    Outputs:: 
    ============================================ 
    | 1. One | 1. Eleven | 1. Twenty One | 
    | 2. Two | 2. Twelve | 2. Twenty Two | 
    | 3. Three | 3. Thirteen | 3. Twenty Three | 
    | 4. Four | 4. Fourteen |     | 
    ============================================ 
    """ 
    class Node(template.Node): 
     def __init__(self, iterable, num_cols, varname): 
      self.iterable = iterable 
      self.num_cols = num_cols 
      self.varname = varname 

     def render(self, context): 
      iterable = template.Variable(self.iterable).resolve(context) 
      num_cols = self.num_cols 
      context[self.varname] = izip(*[chain(iterable, [None]*(num_cols-1))] * num_cols) 
      return u'' 

    try: 
     _, iterable, _, num_cols, _, _, varname = token.split_contents() 
     num_cols = int(num_cols) 
    except ValueError: 
     raise template.TemplateSyntaxError("Invalid arguments passed to %r." % token.contents.split()[0]) 
    return Node(iterable, num_cols, varname) 

이 대부분 잘 알고 있어야합니다.

Answer 2

나는 CSS3 열이 해당 작업에 대한 기능 최고의 descision은 사용하는 것입니다 생각 - 그것은 당신의 리튬의 분할 할 수 있습니다 및 SEO-사람이 될 것이다 기쁘다 :)

최신 브라우져 이미 더 의미있을 것입니다 열로.

.columns-x { 
    column-count: 3; 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 

    column-gap: 20px; 
    -moz-column-gap: 20px;  
    -webkit-column-gap: 20px; 
} 

좋아, 어떤 오래된 브라우저에 대해 :

나는 같은이 같은 문제를 해결? 나는 broser는 CSS3 - 열을 지원하는 경우 얻을 수 Modernizr을 사용했다. - 그렇지 않으면 내가 그래서, 여기에 내 HTML에서 할 것입니다 jquery-columnizer

사용

: 여기

<script type='text/javascript'> 
    Modernizr.load({ 
     test:Modernizr.csscolumns, 
     yep:'{{ STATIC_URL }}_b/columns/css/columns-pure.css', // this is .columns-x - you've seen it above 
     nope:[ 
      // load columnizer plugin 
      '{{ STATIC_URL }}_b/columns/js/jquery.columnizer.min.js', 
      // tell it what to do 
      '{{ STATIC_URL }}_b/columns/js/columns-trick.js' 
     ] 
    }) 
</script> 

그리고 것은 내가 (열 - trick.js을) 할 columnizer에게 무엇인가

$(document).ready(function() { 
    $('.columns-x').columnize({columns: 3}); 
});