Как выровнять каринки по высоте в смежных блоках разной ширины?

Question

[weranda]

Приветствую

Столкнулся с проблемой, которую пока не могу решить. Есть три блока выстроенных в ряд. У первого и третьего блока ширина 33%, а у второго ширина 34%. Внутри блоков картинки в теге IMG. Если блоки одинаковой ширины, то все нормально, а если у второго блока ширина больше двух других блоков, то этот самый блок становится большим по высоте. Вот пример.

Что можно сделать, чтобы при уменьшении или увеличении ширины окна все оставалось на своих местах?

Много что пробовал, но не помогает.

UP
Как сделать так, чтобы высота картинок в блоках была равной при уменьшении или увеличении ширины окна и так, чтобы картинки полностью заполняли собой доступную ширину блока?

Answer 1

[Just_Andrew]

Простенький скрипт для выравнивания блоков в строке.

Comments

[Kovalsky]

И кажется на данный момент это самый надёжный и кроссбраузерный способ.

[weranda]

Уже видел этот скрипт. Добавил в закладки. Неужели нет простого кроссбраузерного решения на CSS или чего-то попроще?

[Kovalsky]

weranda: ну на самом деле поддержка у flex уже довольно основательная, можете использовать его для этой цели. Тут написано как.

[weranda]

Никита Полевой: Flex, к сожалению, не катит. Да и речь не о соседних контейнерах, а о вложенных.

[Kovalsky]

weranda: используйте тогда полностью решение с того сайта) Flexbox + jquery.matchHeight.js в качестве фолбека

Обозначенные вами отличия, мне кажется, не сильно изменят решение. Просто чуть-чуть подпилите под вложенные блоки.

[weranda]

Just_Andrew и Никита Полевой Вы правы, много чего перепробовал. Этот скрипт – единственное, что пока помогло. Спасибо.

Answer 2

[iBird Rose]

расставить clearfix https://jsfiddle.net/cm8ctzL0/2/

Comments

[weranda]

clearfix тут вообще ни при делах. Посмотрите на свой пример и высоту изображений – высота разная, а должна быть одинаковой.

[xtala zen]

weranda: без свойства
.item:nth-child(3n+2) {
width: 34%;
}
все выровнено. https://jsfiddle.net/cm8ctzL0/2/ Зачем оно?

[weranda]

xtala zen: Затем, чтобы ширина этих трех блоков составляла 100%, а не 99%!

[xtala zen]

weranda: Пардон, вот https://jsfiddle.net/cm8ctzL0/6/

[weranda]

xtala zen: Хотите пардоньте, хотите на пардоньте, а ответ о свойстве :nth-child(3n+2) написал вам в предыдущем сообщении.

[iBird Rose]

weranda: ну тогда скрипт в пару строк https://jsfiddle.net/cm8ctzL0/9/

Answer 3

[xtala zen]

Возможно это не то что надо, но я попробовал преобразовать блоки с помощью свойства display: inline-block; вот что получилось https://jsfiddle.net/cm8ctzL0/3/

Comments

[weranda]

Вы правы, в данном случае толку от inline-block никакого нет, вообще никакого ;)

Answer 4

[Rumiour]

img нужно задать max-width. Например 161px

* {
    box-sizing: border-box;
}
	
.item {
    float: left;
    width: 33%;
    padding: 10px;
    border:  1px solid #CCC;
    margin-bottom: 15px;
}

.item:nth-child(3n+2) {
    width: 34%;
    text-align: center;
}

img{
	max-width: 100%;
  max-width: 161px;
}

Comments

[weranda]

Если задать max-width в пикселях, то изображение будет фиксированным чего совсем не требуется. Оно должноувелививаться и уменьшаться в зависимости от ширины блока.

[Rumiour]

или если надо заполнить ширину на 100%, обычно используют width: 33,33%;

[weranda]

Rumiour: 33,33 + 33,33 + 33,33 = 99,99, а не 100 ;)

[Rumiour]

Тогда здесь нужен js или же можно как то с помощью препроцессоров сделать.

Answer 5

[burtulug]

Можно попробовать через display: table-cell для элементов item, но тогда их надо складывать в дополнительные обертки по три штуки.

Comments

[weranda]

Да, вообще не вариант.