Как дать divs одинаковой высоты, когда их содержимое динамично

Question

В принципе, я ищу способ сделать набор из 4 divs одинаковой высоты. Содержимое divs является динамическим, поэтому иногда расширенное содержимое заставляет один из divs расширяться вертикально и делая высоту каждого div в наборе несогласованным. Это лучше всего объяснить на этом примере:

HTML

<div class="answers"> 
    <div class="a-b"> 
    <a href="#" class="answer" id="A">Michael Jackson</a> 
     <a href="#" class="answer" id="B">Stevie Wonder</a> 
    </div> 
    <div class="c-d"> 
     <a href="#" class="answer" id="C">Lionel Richie</a> 
     <a href="#" class="answer" id="D">This answer could contain more text</a> 
    </div> 
</div> 

CSS

.answers { 
    margin-top: 35px; 
} 
.a-b { 
    width: 50%; 
    float: left; 
} 
.c-d { 
    width: 50%; 
    float: right; 
} 
.answer { 
    display: inline-block; 
    border-radius: 32px; 
    text-decoration: none; 
    background-color: #1797FF; 
    color: white; 
    padding: 10px 33px; 
    font-size: 22px; 
    width: 75%; 
    margin-bottom: 20px; 
} 

Как я могу держать, что макет 2х2 и заставить каждого DIV быть одинаковой высоты (продиктованной div с наибольшим количеством текста)?

JSfiddle Link

Answer 1

Вы можете использовать line clamp

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
.answers { 
 
    margin-top: 35px; 
 
    font-size: 0; 
 
} 
 
.answer { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 48%; 
 
    border-radius: 32px; 
 
    text-decoration: none; 
 
    background-color: #1797FF; 
 
    color: white; 
 
    padding: 10px 33px; 
 
    font-size: 22px; 
 
    line-height: 24px; 
 
    margin: 0 1% 20px; 
 
    min-height: 70px; 
 
} 
 
.answer span { 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
    -webkit-box-orient: vertical; 
 
    overflow: hidden; 
 
} 
 

 
.using-overflow { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 48%; 
 
    border-radius: 32px; 
 
    text-decoration: none; 
 
    background-color: #1797FF; 
 
    color: white; 
 
    padding: 10px 33px; 
 
    font-size: 22px; 
 
    line-height: 24px; 
 
    margin: 0 1% 20px; 
 
} 
 

 
.using-overflow span { 
 
    display: block; 
 
    line-height: 24px; 
 
    height: 48px; 
 
    overflow: hidden; 
 
}

<div class="answers"> 
 
    <a href="#" class="answer"><span>Michael Jackson Michael Jackson Michael Jackson Michael Jackson </span></a> 
 
    <a href="#" class="answer"><span>Stevie Wonder</span></a> 
 
    <a href="#" class="answer"><span>Lionel Richie</span></a> 
 
    <a href="#" class="answer"><span>This answer could contain more text This answer could contain more text</span></a> 
 
</div> 
 

 
<h1>using overflow</h1> 
 
<div class="answers"> 
 
    <a href="#" class="using-overflow"><span>Michael Jackson Michael Jackson Michael Jackson Michael Jackson</span></a> 
 
    <a href="#" class="using-overflow"><span>Stevie Wonder</span></a> 
 
    <a href="#" class="using-overflow"><span>Lionel Richie</span></a> 
 
    <a href="#" class="using-overflow"><span>This answer could contain more text This answer could contain more text</span></a> 
 
</div>

Answer 2

Flex коробка имеет много интересных особенностей, но сейчас я предпочитаю решение Jquery, потому что более совместим со старыми браузерами ,

Этот плагин может помочь Вам: http://brm.io/jquery-match-height/

вы можете установить одинаковую высоту для всех элементов или для одной строки.

это основное использование:

$(function() { 
    $('.answer').matchHeight(options); 
}); 

Answer 3

Проведя слишком много времени на это я сдалась с помощью CSS и использовал решение JQuery:

var maxHeight = Math.max.apply(null, $(".answer").map(function() { 
    return $(this).height(); 
}).get()); 

$(".answer").attr('style', 'height: ' + maxHeight + 'px'); 

Answer 4

Это давняя проблема :

Есть только два способа, которые работают последовательно ...

• Используйте новейшие flexbox CSS на своих div (дисплей: flex - вам нужно будет найти спецификации), но это окончательный ответ!

• Если вам нужно поддерживать IE менее 11, то, к сожалению, единственным доступным вариантом является использование презентационных таблиц (это работает, но не рекомендуется) - в противном случае вы вынуждены использовать javascript для настройки высоты divs после начальной загрузки.