根据不同高度的LI调整LI的高度

Question

我正在创建内联 LI，希望它们的高度相似。这里的问题是，当我的一个 LI 有一个长文本时，这个 LI 将具有更大的高度而其他的不调整。（我正在使用 bootstrap 创建我的行）

和HTML代码：

<div class="col-md-12 col-sm-12 col-xs-12 table-custom">
  <ul style="border:1px solid" class="row table-row">
    <li style="width:200px" class="table-cell">title 1</li>
    <li style="width:20%" class="table-cell">Name with very long description to create multiple lines and show what I would like to to.</li>
    <li class="table-cell">title 3</li>
    <li class="table-cell">title 4</li>
  </ul>
  <ul style="border:1px solid" class="row table-row">
    <li class="table-cell">test 1</li>
    <li class="table-cell">test 2</li>
    <li class="table-cell">test 3</li>
    <li class="table-cell">test 4</li>
  </ul>
</div>

Answer 1

一种方法是使用 jQuery。

这是 jsfiddle：http://jsfiddle.net/oe4g2etw/6/

这是您需要的 JS 代码：

// During the first load...
// Find the max height of the elements...
var maxHeight = Math.max.apply(null, $(".table-custom li").map(function (){
    return $(this).height();
}).get());

// And set all the list elements to that max height
$(".table-custom li").css('height', maxHeight);

如果您还想让它响应，您需要添加一个侦听器来检查 window 宽度变化，然后重新计算最高元素的高度并将其设置为所有列表项：

// When the window is resized...
$( window ).resize(function() {
  // Remove the 'height' attribute...
  $(".table-custom li").css("height", "");

  // Find the max height of the elements...
  var maxHeight = Math.max.apply(null, $(".table-custom    li").map(function (){
      return $(this).height();
  }).get());

  // And set it to all the elements
  $(".table-custom li").css('height', maxHeight);
});

希望对您有所帮助！

PS：如果您还没有在 <head> 中添加 jQuery，请不要忘记添加。

Answer 2

您可以使用 display: table-cell.

使元素与其最高兄弟姐妹的身高相匹配

这应该适用于 IE8+ 和所有其他浏览器：

.table-custom {
  min-width: 200px;
}
.table-row {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
}
.table-custom > ul > li {
  text-align: left;
  padding: 0px;
  padding-left: 5px;
  padding-top: 8px;
  padding-bottom: 7px;
  display: table-cell;
  border: 1px solid #f00;
  margin-bottom: 0px;
}

<div class="col-md-12 col-sm-12 col-xs-12 table-custom">
  <ul style="border:1px solid" class="row table-row">
    <li style="width:200px" class="table-cell">title 1</li>
    <li style="width:20%" class="table-cell">Name with very long description to create multiple lines and show what I would like to to.</li>
    <li class="table-cell">title 3</li>
    <li class="table-cell">title 4</li>
  </ul>
  <ul style="border:1px solid" class="row table-row">
    <li class="table-cell">test 1</li>
    <li class="table-cell">test 2</li>
    <li class="table-cell">test 3</li>
    <li class="table-cell">test 4</li>
  </ul>
</div>

根据不同高度的LI调整LI的高度

Adjust height of LI depending on LI of different height

html

css

twitter-bootstrap