Question

我正在尝试对齐三个“面板”元素（来自bootstrap 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;

添加到溢出：隐藏行中的列。

这是你在找什么？

CSS中bootstrap 3面板元素的垂直对齐（没有flexbox）

1 个答案: