如何在 Materialise CSS 中使卡片的垂直高度不同？答案

【问题标题】：How do I make vertical height of cards vary in Materialize CSS?如何在 Materialise CSS 中使卡片的垂直高度不同？
【发布时间】：2021-06-17 06:03:52
【问题描述】：

我试图让它像一个管理面板的东西。为此，我想要一个面板外观，因为我希望它有点不规则，所以我希望卡片的大小有所不同。这是我要修复的：

我不希望我用红色划掉的空间，我希望右边的东西超出它的行，我不知道该怎么做？

我的代码（我正在使用 Django 和 Materialize 以及自定义颜色样式表）：

<div class="container">

  <div class="row">
    <div class="col s3">
      <div class="card">
        <div class="card-content Vgrey white-text">
          <span class="card-title">Networth</span>
          <h3 class="center-align cardVtext">{{net_worth}}</h3>
        </div>
      </div>    
    </div>
    <div class="col s3">
      <div class="card">
        <div class="card-content Vgrey white-text">
          <span class="card-title">Balance</span>
          <h3 class="center-align cardVtext">{{balance}}</h3>
        </div>
      </div>     
    </div>
    <div class="col s2">
      <div class="card">
        <div class="card-content Vgrey white-text">
          <span class="card-title">% Increase</span>
          <h3 class="center-align cardVtext">{{percentage_increase}}</h3>
        </div>
      </div>     
    </div>
    <div class="col s4">
      <div class="card right ">
        <div class="card-content Vgrey white-text">
          <table class="highlight centered responsive-table">
            <thead>
              <tr>
                  <th>Company</th>
                  <th>Stocks Owned</th>
              </tr>
            </thead>

            <tbody>
              {% for stock in portfolio %}
                <tr>
                  <td>{{stock.stock_ticker}}</td>
                  <td>{{stock.stocks_owned}}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div> 
    </div>
  </div> <!--First row ends here-->

  <div class="row">
    <div class="col s8">
      <div class="card">
        <div class="card-content Vgrey white-text">
          <span class="card-title">Networth</span>
          <canvas id="myChart"> </canvas>
        </div>
      </div>    
    </div>
  </div> <!--second row ends here-->






</div><!--Container ends here-->

【问题讨论】：

CSS Grid 可以在这种情况下提供帮助。

标签： css django-templates materialize

【解决方案1】：

Reddit 上一位名叫 jonassalen 的用户回答得很好。

在这个例子中你只需要另一个列布局。

第一行有 2 列：在第一列中放置块有 3 列和下面更大的块。在第二列中，你把方块放在右边。

【讨论】：