Carousel, сделать DIV внутри элемента такой же высоты, как DIV-двойники элемента

У меня есть реагирующий Owl Carousel (v2), каждый элемент или слайде изображение и ниже, что некоторый текст переменной длины, смотрите изображение ниже:Carousel, сделать DIV внутри элемента такой же высоты, как DIV-двойники элемента

Как видно, все изображения снизу совпадают с одной базой, независимо от того, сколько текста там. Я сделал это, установив текст div на фиксированную высоту. Проблема в том, что если бы была только одна строка текста, у меня было бы лишнее пространство ниже карусели.

Если я позволяю ДИВ, чтобы установить свою собственную высоту, я получаю это:

Так что мои изображения больше не выстраивались.

HTML

<div> 
     <img class='a4_diary_image' src='sizes/test.png'> 
     <div class='owl_diary_desc'> 
     A4 size, this is going on to two lines 
     </div> 
    </div> 

    <div> 
     <img class='a5_diary_image' src='sizes/test.png'> 
     <div class='owl_diary_desc'> 
     A5 size 
     </div> 
    </div> 

    <div> 
     <img class='a6_diary_image' src='sizes/test.png'> 
     <div class='owl_diary_desc'> 
     A6 size 
     </div> 
    </div> 

</div>

CSS

.owl-carousel .owl-item { 
    display: table-cell; 
    float: none; 
    text-align: center; 
    vertical-align: bottom; 
    border: 1px dashed grey; 
    height: 100%; 
    padding: 0px 10px; 
} 


.owl_diary_desc { 
    font-size: 19px; 
    border: 1px dashed red; 
    margin-top:10px; 
} 




.a4_diary_image { 
    max-width: 100%; 
    max-height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
} 


.a5_diary_image { 
    max-width: 70%; 
    max-height: 70%; 
    margin-left: auto; 
    margin-right: auto; 
} 


.a6_diary_image { 
    max-width: 50%; 
    max-height: 50%; 
    margin-left: auto; 
    margin-right: auto; 
}

источник

2016-11-05 KevInSol

Не можете ли вы добавить 'min-height' в' .owl_diary_desc' ...? – Stuart

Я не уверен, что бы это сделало? Он будет расти, если добавить больше текста так же, как мой второй захват экрана. – KevInSol

Это было бы так, как это, конечно же, работает min-height, но это по крайней мере позволит вам нанести минимальную высоту как минимум двух строк текста ... (не идеально, но что вы будете делать, когда у вас есть переменная длина текст ...) – Stuart

Straight HTML и CSS не позволит вам т o установить равные высоты на основе братьев и сестер. Однако, используя небольшой jquery, это может быть достигнуто.

$maxDesc; 
function equalize(){ 
    $('.owl_diary_desc').each(function(i){ 
     if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();} 
    }); 

    $('.owl_diary_desc').each(function(i){$(this).height($maxDesc);}); 
}

Когда я использую что-то вроде этого, я обычно перемещаю держатель переменной в начало скрипта. Затем я вызываю функцию на документе готовой. Иногда я даже называю это функцией изменения размера окна. Если вы решите это сделать, вы должны вызвать каждую функцию на своем объекте и сбросить высоту до авто, прежде чем вызывать функцию выравнивания.

источник

2016-11-06 08:22:27 jjeining

Привет, это сработало, как только я изменил первую строку на var $ maxDesc = 0; - Спасибо вам. – KevInSol

Carousel, сделать DIV внутри элемента такой же высоты, как DIV-двойники элемента

ответ

Смежные вопросы