Как выровнять три картинки?

Question

[Alibek Kulseitov]

Как выровнять 3 картинки чтобы обе колонки были одной высоты?
Вот сайт Под слайдером есть 3 баннера. Есть левый контент из двух баннеров и правый состоящий из одного баннера. Как сделать так чтобы обе колонки всегда были одного уровня? (адаптив)

Answer 1

[Ankhena]

1. Я за флекс

2. без флекса

function setEqualHeight(columns){
  var tallestcolumn = 0;
    columns.each(function(){
    currentHeight = $(this).height();
        if(currentHeight > tallestcolumn){
      tallestcolumn = currentHeight;
        }
    });
    columns.height(tallestcolumn);
}

$(document).ready(function(){
    setEqualHeight($(".wrapper . div"));  /*делаем колонки  одинаковой высоты*/
});

селекторы свои подставьте и адаптируйте под свои колонки

Comments

[Alibek Kulseitov]

Ваш способ определенно помог!) Посмотрите сайт ) исходники обновил. Теперь другая проблема) При масштабирования окна браузера блоки багаются (ломаются) а если например сжать до мобилки а потом рефрешнуть страницу то все становится ок. Можно ли реализовать это чтобы это было резиной?)

[Ankhena]

Алибек Кулсеитов: ну так Вы им позиционирование какое задали, они так и встают. И высоту надо пересчитывать при ресайзе.

Answer 2

[Дмитрий]

Ну ничего ведь сложного нету. Это ещё грубая реализация, можно обойтись и без лишнего контейнера, просто мне лень.

Comments

[Alibek Kulseitov]

ну классное решение а без флексов можно? ведь флекс не везде поддерживается

[Дмитрий]

Алибек Кулсеитов, а почему не везде? IE9+, лишь некоторые проблемы с IE10, но в данном примере проблем нету. Главное юзать автопрефиксер. А пользователей ниже IE10 меньше половины процента. Началась новая эпоха)
Ну а если же вам хочется без флексов, то я вам посочувствую) Этот путь долог и тернист.

[Alibek Kulseitov]

Кстати ваше решение не подходит) блоки да нормально выглядят но картинки внутри них такие же

[Дмитрий]

Алибек Кулсеитов, так может стоит задать картинкам height 100%, width 100%, display block? Экспериментируйте со свойствами. А если скажете что картинки растянулись, то я вам отвечу так: не может картинка с 300х600 нормально выглядеть в блоке 600х300.

[Дмитрий]

Алибек Кулсеитов, так же есть вот такая вот штуковина для img: Как сделать img с эффектом background-size — cover ?

[Alibek Kulseitov]

Дмитрий: о, дельная ссылка) спасибо

Answer 3

[ArtViolence]

флексбокс