Question

因此，我正在使用django创建一个网站，并且正在使用materialize框架。我正在使用cards进行问答，问题和答案的长度不同。我想知道是否有一种方法可以使它们对齐，以使各列之间没有空隙。Cards not lining up picture

我确实看到了this code，并且重新排列了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>

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

Answer 1

您可以使用column-width和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的类（请参见this SO post）：

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

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

如何使实现卡在Django中排列？

1 个答案: