设计材料设计Lite网格，卡片看起来像Google Keep

时间：2017-05-11 12:38:53

标签： html css django material-design

我将Django与Material Design Lite结合使用。

我已经完成了一个响应式布局，我生成的卡片随着屏幕的宽度缩放。 Example 1 Example 2

这是呈现的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;
}

我现在想要完成的是卡片之间的垂直间距相同，因此卡片之间有一个固定的空白区域。我怎么做到这一点？我不知道从哪里开始。

1 个答案:

答案 0 :(得分：1)

我没有阅读你的设计，只是想分享我是如何做到的。

How mine looks

我刚检查了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

确保将您的应用放入INSTALLED_APPS settings.py。之后重启服务器。应该很容易更改为其他数量的列。

虽然我的设计存在缺陷。由于它将相同数量的卡分成每列，如果它们中的一些更长并且您运气不好，则某些列可能比其他列长得多。

相关问题
最新问题