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

Posted 2023-02-24

【中文标题】如何在 Materialise CSS 中使卡片的垂直高度不同？

【英文标题】：How do I make vertical height of cards vary in Materialize 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 可以在这种情况下提供帮助。

【参考方案1】：

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

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

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