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

时间:2011-07-04 05:16:38

标签: html css html5 css3 navigation

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

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

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

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

4 个答案:

答案 0 :(得分:2)

$(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/

答案 1 :(得分:1)

.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

答案 2 :(得分:0)

答案很简单:

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

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

答案 3 :(得分:0)

这里我使用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;
}