Question

我有一个内联显示的无序导航项列表，每个项目共享相同宽度的容器（即320px）。

我面临的问题是，由于宽度有限，文本可能会超过两行。但是，是否有可能使所有导航项超链接具有相同的高度，如果一个高于其他导航项？

背景颜色应用于超链接，因为当内容处于活动状态时，它需要处于活动状态。

继承我的小提琴：http://jsfiddle.net/calebo/W7sYZ/1/

Answer 1

$(function(){

    var heighest = 0;
    $('.tab-set li a').each(function(){
        heighest = ($(this).height() > heighest) ? $(this).height() : heighest;

    });

    $('.tab-set li a').css('height',heighest + 'px');

});

http://jsfiddle.net/W7sYZ/2/

Answer 2

.module-controls { display: table; }
.module-controls .tab-set { display: table-row; }

没有JS的Multibrowser变体：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 3

答案很简单：

将背景颜色放在外部元素上，该元素包含您想要具有相同高度的所有元素。

http://jsfiddle.net/W7sYZ/4/

Answer 4

这里我使用flex方法获得了相同高度div的解决方案。

<div class="card-row">
<div class="card">
    <div class="card-content">
        <p>Sample content</p>      
    </div>
    <a href="#" class="button">button</a>
</div>
<div class="card">
    <div class="card-content">
        <p>Sample content</p>
        <p>Sample content two</p>
        <p>Sample content three</p>    
        <p>Sample content two</p>
    </div>
    <a href="#" class="button">button</a>
</div>
<div class="card">
    <div class="card-content">
        <p>Sample content</p>
        <p>Sample content two</p>
    </div>
    <a href="#" class="button">button</a>
</div>

// css

.card {
  background: red;
  flex: 1;
  margin: 0px 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.card-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: #f5f5f5;
  padding: 40px 0px;
  width: 100%;
}
.card-content {
  background: #fff;
  flex: 1;
  margin-bottom: 20px;
}

使用CSS / CSS3自动调整所有元素的高度（使高度相等）

4 个答案: