CSS中的bootstrap 3面板元素的垂直對齊（不帶flexbox）

Question

我正在嘗試對齊三個“面板”元素（來自引導程序3）。

________________        _____________
|   Panel A    |        |   Panel C  |
|              |        |            |
|______________|        |            |
________________        |            |
|   Panel B    |        |            |
|              |        |____________|          
|______________|

我希望面板A和C的頂部對齊，以及面板B和C的底部對齊。

TOP
------------------
Panel A    Panel C

BOTTOM
------------------
Panel B    Panel C

這些面板當前包含圖像，但它們可以包含任何動態內容-因此無法預先知道高度。 此外，由於此html頁面需要響應，因此這些面板中的圖像會根據視口的寬度自動調整大小（使用img-responsive類）。

調整窗口大小時，面板B和C底部之間的垂直間隙大小會發生變化。

這是實際操作的屏幕截圖：

並使用不同的窗口寬度：

這是我為該問題設置的JSFiddle： https ://jsfiddle.net/mfurlend/qsc9ajgx/

不太有用的是嵌入式代碼段：

 <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.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row toprow"> <div class="col-xs-12 col-sm-3 col-sm-push-9"> <div class="panel panel-default"> <div class="panel-heading">Panel C</div> <div class="panel-body"> <div class="row"> <div class="col-xs-12"> <img src="http://placehold.it/320x240" class="img-responsive img-thumbnail center-block img-rounded"> </div> <div class="col-xs-12"> <img src="http://placehold.it/320x240" class="img-responsive img-thumbnail center-block img-rounded"> </div> </div> </div> </div> </div> <div class="col-xs-12 col-sm-9 col-sm-pull-3"> <div class="panel panel-default"> <div class="panel-heading">Panel A</div> <div class="panel-body"> <div class="row"> <div class="col-sm-4"> <img class="img-responsive img-rounded center-block img-thumbnail" src="http://placehold.it/320x240"> </div> <div class="col-sm-4"> <img class="img-responsive img-rounded center-block img-thumbnail" src="http://placehold.it/320x240"> </div> <div class="col-sm-4"> <img class="img-responsive img-rounded center-block img-thumbnail" src="http://placehold.it/320x240"> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Panel B</div> <div class="panel-body"> <div class="row"> <div class="col-xs-2"> <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240"> </div> <div class="col-xs-2"> <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240"> </div> <div class="col-xs-2"> <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240"> </div> <div class="col-xs-2"> <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240"> </div> <div class="col-xs-2"> <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240"> </div> <div class="col-xs-2"> <img class="img-responsive img-rounded img-thumbnail center-block" src="http://placehold.it/320x240"> </div> </div> </div> </div> </div> </div> </div> 

使用Flexbox我能夠達到預期的效果，但是我需要一個與舊版瀏覽器兼容的解決方案。 我寧願解決方案是純CSS-但JS將作為最后的選擇。

這是我設置的JSFiddle，它使用Flexbox演示了預期的行為： https ://jsfiddle.net/mfurlend/q97x655o/

Answer 1

我想這可能是一個好的開始。 這是Paulie_D鏈接到您的代碼的實現： https ://jsfiddle.net/qsc9ajgx/4/技巧是：

  margin-bottom: -99999px;
  padding-bottom: 99999px;

已添加到overflow：隱藏行的列中。

這是您要找的東西嗎？