【发布时间】：2018-10-16 21:46:29
【问题描述】：
所以我有一排有 2 列。一列有 2 张卡片，而另一列有 1 张卡片。第二张卡片和第三张卡片的内容是动态的。
有没有办法使用 css 让卡片自动设置高度，以便卡片底部对齐？当名为“secondPanel”的卡片的内容少于名为“thirdPanel”的卡片时，我希望增加 secondPanel 上的高度，使其底部与thirdPanel 的底部对齐，并且当thirdPanel 小于secondPanel 的时候要增加高度，使其底部与 secondPanel 的底部对齐。
我已经尝试使用 boostrap h-100 类来使其工作，但父容器的总高度从未在任何地方设置，因此该类似乎没有做任何事情。我知道我可以使用 javascript 来比较高度并以这种方式进行设置，但如果可能的话，我想使用纯 CSS 或现有的引导功能来完成此操作。
<div class="container">
<div class="row">
<div class="col">
<div class="card" id="firstPanel">
<div class="card-body">
<h3 class="card-title">Here's the 1st panel</h3>
<div class="card-text">We'll add a little text to fill out the height of the card a little bit</div>
</div>
</div>
<div class="card" id="secondPanel">
<div class="card-body">
<h3 class="card-title">Here's the 2nd panel</h3>
<div class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem"</div>
</div>
</div>
</div>
<div class="col">
<div class="card" id="thirdPanel">
<div class="card-header card-title">
<div class="row">
<div class="col">
Results
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="result-summary-row">
<td>Smith, Robert</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>Jones, Ralph</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>Jefferson, Julio</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>Brauman, Derrick</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>James, Henry</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
【问题讨论】：
-
并非如此。在单独的容器中时，无法将 flexbox 子项相对于彼此对齐。
-
@Zim 你是说因为有问题的卡片位于不同的列 div 中，这是无法做到的？
-
是的，正是……另见：stackoverflow.com/questions/51860518
-
用sn-p代码帮助你会更容易..
标签： html css twitter-bootstrap