避免使用演示mdl组件

Question

如何纵向拉伸mdl-cards，以便一切都平稳？我宁愿myFinalFile伸展。

的示例

Answer 1

要解决三个问题。

第一个mdl-cell元素已经是行中“最大”单元格的高度。因此，使卡片的高度相同“使卡成为单元格”。

<div class="mdl-cell mdl-card mdl-shadow--2dp demo-card-wide">
//...
</div>

下一个问题是mdl-card__actions不在卡的底部要更改此设置，请将操作置于绝对位置，然后将其移至底部。

.demo-card-wide > .mdl-card__actions {
  position: absolute;
  bottom: 0px;
}

第三个问题：
现在最大的汽车的内容和行动是重叠的。这是令人讨厌的。如果您知道动作的高度，那么只有一个简单的解决方案（据我所知）。然后在卡片中添加padding-bottom。

.demo-card-wide.mdl-card {
  /* ... */
  padding-bottom: 50px;
}

还有一条评论：尽量避免卡的固定宽度。更好用： mdl-cell - X-col / yyy /来自mdl grid

看看这个改变了codepen

Answer 2

您可以在要添加间隔符的位置添加一个空白的<div class="column-expander"></div>，并将其添加到CSS中：

.column-expander {
     flex-grow: 1;
}

Answer 3

避免使用演示mdl组件

您需要做的就是将卡组件放在网格单元格中，例如：

<div class="mdl-card-wide mdl-cell mdl-cell--N-col>

mdl网格系统有默认空格，因此如果您将卡片组件放入单元格内，卡片将自动采用默认网格空间。

这是codepen示例：

adding space between cards

<div class="mdl-grid">
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
          </div>

还要记住这一点，卡片组件可以是正方形或宽片，但如果你将卡片放在一个单元格内，你就不需要写正方形或宽边。

并避免使用mdl演示组件。

材料设计精简垂直mdl卡

3 个答案:

避免使用演示mdl组件