html - CSS 表格单元格和 Bootstrap 的奇怪对齐问题

Question

我们遇到了一个问题，由于某种原因，最后一行有大量无法解释的填充。我花了两个小时试图弄清楚这一点。如果这很简单，我很抱歉。

https://www.harpercollege.edu/maker/dev-index.php

<div class="circle-box-table-container">
<div id="circle-box-7" class="col-xs-12 col-sm-12 col-md-4 circle-box-alt-box">
<div class="box">
<div class="circle-box-content-containter">
<div class="circle-box-content-heading">Youth STEAM Class&nbsp;</div>
<div class="circle-box-content-text"><a href="{{f:2323900}}"><img class="pull-left" style="margin-bottom: 5px; margin-right: 5px;" title="Youth STEAM Class" src="{{f:28913025}}" alt="Building Model" width="90" height="94" /></a><em><strong>The new "shop class"</strong></em><br />We are bringing back shop classes for kids. We&rsquo;ll teach 21st century skills in a hands-on, fun and engaging environment.</div>
</div>
</div>
</div>
<div id="circle-box-8" class="col-xs-12 col-sm-12 col-md-8 circle-box-alt-box-wide">
<div class="box">
<div class="circle-box-content-containter"><img class="" src="{{f:28930375}}" alt="Maker-Space-Banner" width="100%" /></div>
</div>
</div>
</div>

Answer 1

在最后一个盒子上使用vertical-align: top。浏览器自动为表格单元格填充，以与其余内容保持均匀大小。