@3vgeny

Как сделать эти два блока одинаковыми по высоте?

.style1 {
	float:left;
	position: relative;
	max-height: 220px;
	background-size: cover;
	background-position: center;
	transition: all .2s ease-in-out;
        overflow: hidden;
}
.style1 img {
	min-height: 220px;
}


a.test1 {
	float:left;
	width:31%;
	font-size: 28px;
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC; 
        color: #555555;
        margin: 10px auto;
        margin-left:10px;
	margin-bottom: 10px;    
	text-align: center;     
}


Если классу a.test1 не задать padding-top и padding-bottom то получается как на картинке (прикрепленной к вопросу). Если задать отступы, то при зуме страницы, уменьшении окна браузера и тд. Они начинают уменьшаться неодинаково, картинка становится больше чем рамка второго блока, т.е. второй блок - рамка border 1px уменьшается сильнее и быстрее )

Какой то общий блок я им задать не могу, т.к. первый стиль у меня в цикле, а второй стиль (блок) мне надо вывести после цикла, но рядом и по размеру также.
Подскажите пожалуйста.
5c646cf13706f637264716.png
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 5
@lb-web
Забыть о флоатах, почитать о flex. По умолчанию у него у смежных колонок equal height стоит
Ответ написан
@3vgeny Автор вопроса
В общем если сделать текст в одну строку, который при зумах не будет делаться в две строки, например в моём случае "читать все статьи" > "все статьи", то тогда можно сделать line-heigh
a.test1 {
  float:left;
  width:31%;
  font-size: 28px;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC; 
  color: #555555;
  margin: 10px auto;
  margin-bottom: 10px; 
  line-height: 220px;  
  text-align: center;     
}
Ответ написан
shnopik87
@shnopik87
Утром, познав истину, вечером можно умереть.
Очень странно что люди в начале 2019 года еще используют Float
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
GreatAgent Inc Санкт-Петербург
от 1 500 до 3 500 usd.
iWeekender Краснодар
от 80 000 руб.
26 апр. 2019, в 06:39
500 руб./за проект
26 апр. 2019, в 06:16
1000 руб./за проект
26 апр. 2019, в 01:38
5000 руб./за проект