Question

我已尝试使用Flexbox和Match Height，但无论我做什么，它都不想以正确的方式解决所有问题。如果您查看vijeos.com，您会看到一些标题较长的卡片无法正常使用。我需要标题是正确的高度，类别，注释和共享固定在页面底部。无法弄清楚我做错了什么？

比赛前高度

After Match Height

正如你所看到的，它解决了高度问题，但是类别：仍然存在。任何帮助都会很棒：）

脚本：

    //Dynamic Card Titles
    jQuery(document).ready(function() {
    $(".card-content").matchHeight();
    });

当前代码：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col xl4 l4 m12 s12">
    <div class="card z-depth-5">
      <div class="card-image">
        <a href='http://vijeos.com/post/1742/naked-girl-ordering-pizza-prank' title='Naked Girl Ordering Pizza Prank'><img class="responsive-img" src="http://img.youtube.com/vi/_SYuFDQREgM/mqdefault.jpg" alt="Naked Girl Ordering Pizza Prank Image"></a>
        <span class="card-title"></span>
        <a href="http://www.youtube.com/watch?v=_SYuFDQREgM" class="btn-floating halfway-fab waves-effect waves-light black" title="http://www.youtube.com/watch?v=_SYuFDQREgM" rel="nofollow"><i class="material-icons">play_arrow</i></a>
      </div>
      <div class="card-content">
        <p><a href='http://vijeos.com/post/1742/naked-girl-ordering-pizza-prank' rel='nofollow' title='Naked Girl Ordering Pizza Prank Video'>Naked Girl Ordering Pizza Prank</a></p>
        <br />
        <p style="text-align:left;">Category: <a href='http://vijeos.com/category/pranks/page/1' rel='nofollow'>Pranks</a></p>
      </div>
    </div>
  </div>
  <div class="col xl4 l4 m12 s12">
    <div class="card z-depth-5">
      <div class="card-image">
        <a href='http://vijeos.com/post/1741/breakfast-candh' title='Breakfast C&H'><img class="responsive-img" src="http://img.youtube.com/vi/ULMXplGmleQ/mqdefault.jpg" alt="Breakfast C&H Image"></a>
        <span class="card-title"></span>
        <a href="http://www.youtube.com/watch?v=ULMXplGmleQ" class="btn-floating halfway-fab waves-effect waves-light black" title="http://www.youtube.com/watch?v=ULMXplGmleQ" rel="nofollow"><i class="material-icons">play_arrow</i></a>
      </div>
      <div class="card-content">
        <p><a href='http://vijeos.com/post/1741/breakfast-candh' rel='nofollow' title='Breakfast C&H Video'>Breakfast C&H</a></p>
        <br />
        <p style="text-align:left;">Category: <a href='http://vijeos.com/category/weird/page/1' rel='nofollow'>Weird</a></p>
      </div>
    </div>
  </div>
  <div class="col xl4 l4 m12 s12">
    <div class="card z-depth-5">
      <div class="card-image">
        <a href='http://vijeos.com/post/1740/riding-motorcycles-alone-can-have-its-pitfalls' title='Riding Motorcycles Alone Can Have It"s Pitfalls...'><img class="responsive-img" src="http://img.youtube.com/vi/FCpvmfhVyco/mqdefault.jpg" alt="Riding Motorcycles Alone Can Have It's Pitfalls... Image "></a>
        <span class="card-title "></span>
        <a href="http://www.youtube.com/watch?v=FCpvmfhVyco " class="btn-floating halfway-fab waves-effect waves-light black " title="http://www.youtube.com/watch?v=FCpvmfhVyco " rel="nofollow "><i class="material-icons ">play_arrow</i></a>
      </div>
      <div class="card-content ">
        <p>
          <a href='http://vijeos.com/post/1740/riding-motorcycles-alone-can-have-its-pitfalls' rel='nofollow' title='Riding Motorcycles Alone Can Have It' s Pitfalls... Video '>Riding Motorcycles Alone Can Have It's Pitfalls...</a></p>
        <br />
        <p style="text-align:left; ">Category: <a href='http://vijeos.com/category/fails/page/1' rel='nofollow'>Fails</a></p>
      </div>
    </div>
  </div>
  <div class="col xl4 l4 m12 s12 ">
    <div class="card z-depth-5 ">
      <div class="card-image ">
        <a href='http://vijeos.com/post/1739/rollerblading-down-a-bobsled-track' title='Rollerblading Down a Bobsled Track'><img class="responsive-img " src="http://img.youtube.com/vi/SymoRr3tbG8/mqdefault.jpg " alt="Rollerblading Down a Bobsled
          Track Image "></a>
        <span class="card-title "></span>
        <a href="http://www.youtube.com/watch?v=SymoRr3tbG8 " class="btn-floating halfway-fab waves-effect waves-light black " title="http://www.youtube.com/watch?v=SymoRr3tbG8 " rel="nofollow "><i class="material-icons ">play_arrow</i></a>
      </div>
      <div class="card-content ">
        <p><a href='http://vijeos.com/post/1739/rollerblading-down-a-bobsled-track' rel='nofollow' title='Rollerblading Down a Bobsled Track Video'>Rollerblading Down a Bobsled Track</a></p>
        <br />
        <p style="text-align:left; ">Category: <a href='http://vijeos.com/category/wins/page/1' rel='nofollow'>Wins</a></p>
      </div>
    </div>
  </div>
  <div class="col xl4 l4 m12 s12 ">
    <div class="card z-depth-5 ">
      <div class="card-image ">
        <a href='http://vijeos.com/post/1738/almost-wins' title='Almost Wins'><img class="responsive-img " src="http://img.youtube.com/vi/3XPmG6EktNY/mqdefault.jpg " alt="Almost Wins Image "></a>
        <span class="card-title "></span>
        <a href="http://www.youtube.com/watch?v=3XPmG6EktNY " class="btn-floating halfway-fab waves-effect waves-light black " title="http://www.youtube.com/watch?v=3XPmG6EktNY " rel="nofollow "><i class="material-icons ">play_arrow</i></a>
      </div>
      <div class="card-content ">
        <p><a href='http://vijeos.com/post/1738/almost-wins' rel='nofollow' title='Almost Wins Video'>Almost Wins</a></p>
        <br />
        <p style="text-align:left; ">Category: <a href='http://vijeos.com/category/fails/page/1' rel='nofollow'>Fails</a></p>
      </div>
    </div>
  </div>
  <div class="col xl4 l4 m12 s12 ">
    <div class="card z-depth-5 ">
      <div class="card-image ">
        <a href='http://vijeos.com/post/1737/birdie-gets-his-nails-trimmed' title='Birdie Gets His Nails Trimmed'><img class="responsive-img " src="http://img.youtube.com/vi/_6zzskV6p80/mqdefault.jpg " alt="Birdie Gets His Nails Trimmed Image "></a>
        <span class="card-title "></span>
        <a href="http://www.youtube.com/watch?v=_6zzskV6p80 " class="btn-floating halfway-fab waves-effect waves-light black " title="http://www.youtube.com/watch?v=_6zzskV6p80 " rel="nofollow "><i class="material-icons ">play_arrow</i></a>
      </div>
      <div class="card-content ">
        <p><a href='http://vijeos.com/post/1737/birdie-gets-his-nails-trimmed' rel='nofollow' title='Birdie Gets His Nails Trimmed Video'>Birdie Gets His Nails Trimmed</a></p>
        <br />
        <p style="text-align:left; ">Category: <a href='http://vijeos.com/category/animals/page/1' rel='nofollow'>Animals</a></p>
      </div>
    </div>
  </div>
  <div class="col xl4 l4 m12 s12 ">
    <div class="card z-depth-5 ">
      <div class="card-image ">
        <a href='http://vijeos.com/post/1736/bear-and-cubs-swim-in-backyard-pool' title='Bear and Cubs Swim in Backyard Pool'><img class="responsive-img " src="http://img.youtube.com/vi/tdW7qpAno9s/mqdefault.jpg " alt="Bear and Cubs Swim in Backyard
          Pool Image "></a>
        <span class="card-title "></span>
        <a href="http://www.youtube.com/watch?v=tdW7qpAno9s " class="btn-floating halfway-fab waves-effect waves-light black " title="http://www.youtube.com/watch?v=tdW7qpAno9s " rel="nofollow "><i class="material-icons ">play_arrow</i></a>
      </div>
      <div class="card-content ">
        <p><a href='http://vijeos.com/post/1736/bear-and-cubs-swim-in-backyard-pool' rel='nofollow' title='Bear and Cubs Swim in Backyard Pool Video'>Bear and Cubs Swim in Backyard Pool</a></p>
        <br />
        <p style="text-align:left; ">Category: <a href='http://vijeos.com/category/animals/page/1' rel='nofollow'>Animals</a></p>
      </div>
    </div>
  </div>
  <div class="col xl4 l4 m12 s12 ">
    <div class="card z-depth-5 ">
      <div class="card-image ">
        <a href='http://vijeos.com/post/1735/speedo-man' title='Speedo Man'><img class="responsive-img " src="http://img.youtube.com/vi/UjosUah2F3A/mqdefault.jpg " alt="Speedo Man Image "></a>
        <span class="card-title "></span>
        <a href="http://www.youtube.com/watch?v=UjosUah2F3A " class="btn-floating halfway-fab waves-effect waves-light black " title="http://www.youtube.com/watch?v=UjosUah2F3A " rel="nofollow "><i class="material-icons ">play_arrow</i></a>
      </div>
      <div class="card-content ">
        <p><a href='http://vijeos.com/post/1735/speedo-man' rel='nofollow' title='Speedo Man Video'>Speedo Man</a></p>
        <br />
        <p style="text-align:left; ">Category: <a href='http://vijeos.com/category/fails/page/1' rel='nofollow'>Fails</a></p>
      </div>
    </div>
  </div>
  <div class="col xl4 l4 m12 s12 ">
    <div class="card z-depth-5 ">
      <div class="card-image ">
        <a href='http://vijeos.com/post/1734/whats-inside-a-bladeless-fan' title='What' s inside a Bladeless Fan? '><img class="responsive-img " src="http://img.youtube.com/vi/2Wnep79ULAI/mqdefault.jpg " alt="What 's inside a Bladeless Fan? Image "></a>
              <span class="card-title "></span>
              <a href="http://www.youtube.com/watch?v=2Wnep79ULAI " class="btn-floating halfway-fab waves-effect waves-light black " title="http://www.youtube.com/watch?v=2Wnep79ULAI " rel="nofollow "><i class="material-icons ">play_arrow</i></a>
            </div>
            <div class="card-content ">
              <p><a href='http://vijeos.com/post/1734/whats-inside-a-bladeless-fan ' rel='nofollow ' title='What 's inside a Bladeless Fan? Video'>What's inside a Bladeless Fan?</a>
        </p>
        <br />
        <p style="text-align:left; ">Category: <a href='http://vijeos.com/category/tech/page/1' rel='nofollow'>Tech</a></p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

卡片中型和大型课程适用于您的用例吗？如果您需要大于提供的那些，您可以更改其中一个类并提供您自己的最大高度

使用页脚实现匹配卡高度

1 个答案: