我正在尝试对齐三个“面板”元素(来自 bootstrap 3)。
________________ _____________
| Panel A | | Panel C |
| | | |
|______________| | |
________________ | |
| Panel B | | |
| | |____________|
|______________|
我希望面板 A 和 C 的顶部对齐,面板 B 和 C 的底部也对齐。
TOP
------------------
Panel A Panel C
BOTTOM
------------------
Panel B Panel C
这些面板目前包含图像,但它们可以包含任何动态内容——因此无法提前知道高度。此外,由于此 html 页面需要响应,因此这些面板中的图像会根据视口(viewport)的宽度自动调整大小(使用 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/
最佳答案
我想这可能是一个好的开始。这是 Paulie_D 链接到您的代码的实现: https://jsfiddle.net/qsc9ajgx/4/ 诀窍是:
margin-bottom: -99999px;
padding-bottom: 99999px;
添加到 overflow:hidden 行中的列。
这就是您要找的吗?
关于html - CSS 中 bootstrap 3 面板元素的垂直对齐(无 flexbox),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36413267/