时间戳

首页 > 解决方案 > 如何在 django 中使物化卡排队？

html - 如何在 django 中使物化卡排队？

问题描述

所以我正在用 django 创建一个网站，我正在使用物化框架。我用卡片来展示问答，问题和答案都是长短不一的。我想知道是否有办法让它们排成一行，这样列中就没有间隙了。卡片不排队图片

我确实看到了这段代码，并且我重新排列了我的 html 以匹配它（我确实将 for 循环移动到正确的位置），然后将 css 粘贴到 css 文件的底部，但这导致卡片显示在一长列中.

这是我的代码：

<div class="row">
        {% for q in faqs %}
            <div class="col s12 m6 l4 cards-container">
                <div class="card blue-grey darken-2">
                    <div class="card-content white-text">
                        <span class="card-title">{{q.question}}</span>

                    </div>
                    <div class="card-action white-text">
                        <p><i>{{q.answer}}</i></p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

如果有人知道解决此问题的方法，我将不胜感激。

标签： htmlcssmaterialize

解决方案

column-width您可以使用and实现此目的column-gap：

div.card-container {
  -moz-column-width: 23rem;
  -webkit-column-width: 23rem;
  -moz-column-gap: 1rem;
  -webkit-column-gap: 1rem;
}

.cardpanel {
  display: inline-block;
  width: 100%;
}

加上：

<div class="row card-container">
        {% for q in faqs %}
            <div class="cardpanel">
                <div class="card blue-grey darken-2">
                    <div class="card-content white-text">
                        <span class="card-title">{{q.question}}</span>

                    </div>
                    <div class="card-action white-text">
                        <p><i>{{q.answer}}</i></p>
                    </div>
                </div>
            </div>
        {% endfor %}
</div>

此处演示：https ://jsfiddle.net/mnjh9zr3/1/

请注意，您也可以使用column-count代替column-width，并为不同的视口大小指定不同的列数。

编辑：您可以通过设置底部边距来调整卡片之间的垂直间距：

.card {
    margin: 0.5rem 0 0.5rem 0;
}

要减少行之间的默认垂直间距（即卡片的整个部分和页面的其余部分之间），请添加一个具有自定义的类margin-bottom（请参阅此 SO 帖子）：

.narrow-margin {
  margin-bottom: 0px !important;
}

演示：https ://jsfiddle.net/glhr0/n5svqej1/

推荐阅读