Автоматическая регулировка высоты (равная высота) всех элементов с использованием CSS / CSS3

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: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 3

здесь я получил решение для равной высоты div, используя метод flex.

<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;
}

Answer 4

Ответ прост:

Поместите цвет фона на внешний элемент, который содержит все элементы, которые вы хотите иметь равную высоту.

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