Question

我正在使用Bootstrap，我试图让一排盒子的高度相同。

这是一个愚蠢的例子：

CSS：

.col-md-4 {
    border:1px solid black; 
    height:100%;
}

HTML：

<div class="row">
  <div class="col-md-4">Less text</div>
  <div class="col-md-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit</div>
  <div class="col-md-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
  </div>
</div>

这导致行中的第一个框很小，第三个框非常大。我希望他们都拥有相同的高度。

如何在不设置静态高度的情况下使行中所有框的高度与最高的框相匹配？我不知道bigts box会有多大。我知道我可以用桌子来做这件事，但这不是最佳的。有没有办法用CSS做到这一点？

这是bootply example。我做了一些谷歌搜索，但无法找到我想要的东西。

Answer 1

CSS Only解决方案

注意：请谨慎使用，并将样式定位到特定 .col-md-4元素。但对于您的代码示例：

.col-md-4 {
    display: table-cell;
    float: none;
    border:1px solid black; 
    height:100%;
}

演示 http://www.bootply.com/JXL6MYXiWO

Answer 2

$(document).ready(function(){
    var highestCol = Math.max($('.div01').outerHeight(),
                              $('.div02').outerHeight(),
                              $('.div03').outerHeight());
    $('.col-md-4').outerHeight(highestCol);
})

jQuery示例，非常快速有效。只需给这些div添加其他类别，例如div01，div02，div03。查看http://jsfiddle.net/a7jow8c3/

Answer 3

Flexbox可能是您目前最好的选择。请参阅此文章：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

目前的浏览器支持：http://caniuse.com/#feat=flexbox

CSS匹配行中其他元素的高度

3 个答案: