weranda
@weranda

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

Приветствую

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

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

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

UP
Как сделать так, чтобы высота картинок в блоках была равной при уменьшении или увеличении ширины окна и так, чтобы картинки полностью заполняли собой доступную ширину блока?
  • Вопрос задан
  • 372 просмотра
Решения вопроса 1
@Just_Andrew
Простенький скрипт для выравнивания блоков в строке.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
xtala
@xtala
Постигает Дзен
Возможно это не то что надо, но я попробовал преобразовать блоки с помощью свойства display: inline-block; вот что получилось https://jsfiddle.net/cm8ctzL0/3/
Ответ написан
@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;
}
Ответ написан
@burtulug
Можно попробовать через display: table-cell для элементов item, но тогда их надо складывать в дополнительные обертки по три штуки.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы