У меня проблема с созданием ящиков одинаковой высоты для бутстрапа 3. В начале у меня были проблемы с разными размерами изображений, поэтому я попытался взломать его через JS и изменить их размер на лету. Проблема в том, что если для изображения нет кеша, JS терпит неудачу и еще больше закручивает макет. Я закончил изменение размеров всех изображений до 700 x 700 пикселей, но проблема все еще существует, поскольку сопроводительный текст может иметь разную длину.Ящики с одинаковой высотой
Я создал пример в скрипкой: https://jsfiddle.net/7yqkgm2c/
Я не очень хорошо с помощью CSS и мне интересно, если вы сможете мне помочь с решением.
Это JS, который я использовал, чтобы сделать все ящики и ту же высоту (удалить его из скрипки)
$(document).ready(function() {
//function that calculates height and makes all boxes same height. Issue- imeges that are not cached, screwing up the layout
var heights = $(".thumbnail").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".thumbnail").height(maxHeight + 15);
//end same height products
});
Это результат, который я хочу достичь (или предложить свое решение, если вы считаете, что вы знать, как подойти к нему лучше):
будет min-height: 123px работать для вас? в css? – VictorySaber
У вас есть контроль над разметкой?Я заметил много лишних классов div и bootstrap в HTML, которые можно было удалить, чтобы упростить задачу CSS. – Candlejack
Да, знаю. Это результат того, что я воюю с ним .. испортил это довольно хорошо – Andrew