Question

以下内容在3列中创建了类别和子类别的列表。

但有时子类别将位于列的顶部。我怎样才能使顶层类别始终位于列的顶部，就像亚马逊所做的那样：http://www.amazon.com/gp/site-directory/ref=sa_menu_top_fullstore/189-4849712-0706628

<ul style=" -webkit-column-count: 3; margin-top:50px;">
{% for cat in topcats %}
<li><a href="/parts/{{cat.id}}/dir/" style="text-decoration:none;font-size:18px;color:#FF761A;">{{cat.category}} </a>
{% for key, value in subcats.items %}
{% if key == cat %}
        {% for eachsubcat in value %}
        <h5 class="inline"><a href ="/parts/{{eachsubcat.id}}/dir/" style="text-decoration:none;">{{ eachsubcat }}</a></h5>
        <br>
        {% endfor %}
        <br>
        {% endif %}
        {% endfor %}
</li>
{% endfor %}
</ul>

更新：这是我的JSFiddle代码 - http://jsfiddle.net/X6ay3/

Answer 1

    <ul style=" -webkit-column-count: 3; margin-top:50px;">
    {% for cat in topcats %}
    <li>
<a href="/parts/{{cat.id}}/dir/" style="text-decoration:none;font-size:18px;color:#FF761A;">{{cat.category}} </a>
    {% for key, value in subcats.items %}
    {% if key == cat %}
            {% for eachsubcat in value %}
            <h5 class="inline"><a href ="/parts/{{eachsubcat.id}}/dir/" style="text-decoration:none;">{{ eachsubcat }}</a></h5>
            <br>
            {% endfor %}
            <br>
            {% endif %}
            {% endfor %}
    {% endfor %}
    </li> <!-- missing li-->
    </ul>

创建类别列表时，使主类别始终位于列的顶部

1 个答案: