帶有卡片的Design Material Design Lite Grid看起來像Google Keep

Question

我將Django與Material Design Lite結合使用。

我已經完成了一個響應式布局，其中生成的卡與屏幕的寬度成比例。

這是呈現的HTML的摘錄，其中刪除了一些卡片以使其可讀。

 <main class="mdl-layout__content"> <div class="mdl-grid"> <!-- Start of card !--> <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone "> <div class="stories mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__supporting-text">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;&quot;Lorem ipsum dolor sit amet, consectetur adipiscing e</h2> </div> <div class="mdl-card__title-text"> Tales </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/1/details">View details</a> </div> </div> </div> <!-- End of card !--> <!-- Start of card !--> <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone "> <div class="stories mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__supporting-text">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;&quot;Lorem ipsum dolor sit amet, consectetur adipiscing e</h2> </div> <div class="mdl-card__title-text"> fezfez </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/2/details">View details</a> </div> </div> </div> <!-- End of card !--> <!-- Start of card !--> <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone "> <div class="stories mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__supporting-text">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;&quot;Lorem ipsum dolor sit amet, consectetur adipiscing e</h2> </div> <div class="mdl-card__title-text"> ffffum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/3/details">View details</a> </div> </div> </div> <!-- End of card !--> <!-- Start of card !--> <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone "> <div class="stories mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__supporting-text">ff</h2> </div> <div class="mdl-card__title-text"> fze </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/34/details">View details</a> </div> </div> </div> <!-- End of card !--> </div> </main> 

未編譯的HTML：

  <div class="mdl-grid"> {% for story in all_stories_list %} <!-- Start of card !--> <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone "> <div class="stories mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__supporting-text">{{story.story_plot}}</h2> </div> <div class="mdl-card__title-text"> {{story.story_name}} </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="/{{story.id}}/details">View details</a> </div> </div> </div> <!-- End of card !--> {% endfor %} 

這是CSS：

 .stories { margin-bottom: 20px; width:auto; } .mdl-card__title { background-color: #156767; } .mdl-card__title-text { padding-top: 5px; padding-bottom: 5px; padding-right: 5px; } .mdl-card__supporting-text{ color:white; } 

我現在想完成的是，卡之間垂直具有相同的間距，因此卡之間有固定的空白。 我將如何完成？ 我不知道從哪里開始。

Answer 1

我沒有仔細閱讀您的設計，只是想分享我的設計方法。

我的樣子

我剛剛檢查了Google Keep，相信它就是您要找的東西。 主要思想不是將卡片放置在表格中，而是放置在某些列中。 實際上，列中的所有卡片都具有相同的寬度，那么我們就可以在列之間分配卡片。

首先，我的html模板：

{% load mod_filter %}
<div class="content" align="center">
    {% for counter in "0123" %}
    <div class="col" style="width:24%; display:inline-block; vertical-align:top;">
        {% for item in result %}
        {% ifequal forloop.counter|is_in_col:4 forloop.parentloop.counter %}
        <div class="card blue-grey darken-1" style="width: 100%;">
            <div class="card-content white-text" align="left">
                <span class="card-title">Card Title</span>
                <p>{{ item.content }}</p>
            </div>
            <div class="card-action" align="left">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
            </div>
        </div>
        {% endifequal %}
        {% endfor %}
    </div>
    {% endfor %}
</div>

我使用了is_in_col過濾器來根據項目的索引分配項目。 您還需要創建此過濾器。 在您的應用中創建一個名為templatetags的文件夾，在其中創建一個空的__init__.py和mod_filter.py 。

mod_filter.py

from django import template

register = template.Library()


@register.filter
def is_in_col(num, val):
    return (num - 1) % val + 1   # forloop counter starts with 1

確保將您的應用放入settings.py中的INSTALLED_APPS中。 之后，重新啟動服務器。 更改為其他列數應該很容易。

我的設計中有一個缺陷。 由於它將相同數量的卡片分成幾列，因此如果其中一些更長，而您又不走運，那么某些列會比其他列更長。