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

Question

Евгений М @3vgeny

В начале пути

CSS

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

.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 уменьшается сильнее и быстрее )

Какой то общий блок я им задать не могу, т.к. первый стиль у меня в цикле, а второй стиль (блок) мне надо вывести после цикла, но рядом и по размеру также.
Подскажите пожалуйста.

Вопрос задан более трёх лет назад
171 просмотр

Комментировать

Подписаться 2 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 4

2 комментария

Михаил Власов @Whiled0S

Да, сейчас поддержка флексов уже достаточно на высоком уровне, чтобы свободно их использовать. Если для конкретно этого случая, то просто нужно задать родительскому элементу display: flex и он сам сделает свое дело по уравниванию высоты.

Написано более трёх лет назад

Евгений М @3vgeny Автор вопроса

Михаил Власов, к сожалению такое решение не подходит, или я просто не могу правильно всё переделать. Дело в том что в родительском блоке цикл и там не только картинка, но на ней и тайтл и стиль затемнения и текст под картинками и ссылки. Если поставить display: flex то всё это идёт по одному женскому органу ) При этом высота выравнивается но скорее по размеру и текста под картинкой, а мне надо чтобы выравнивалась только по картинке

<div id="blogs">
<div class="wrapper">
<div class="row posts">

<?php if (have_posts()) : ?>
<?php while (have_posts() ) : the_post(); ?>

<div class="col24">
      <div class="wrap-col">   
     <div class="posts3"> 
      <h3 class="posttitle3"><?php the_title(); ?></h3>
      <a href="<?php the_permalink(); ?>">
      <div class="imageoverlay">
       <h3 class="posttitle"><?php the_title(); ?></h3>
      </div></a>
     <?php if ( has_post_thumbnail() ) {
							the_post_thumbnail( 'blog-thumb', array( 'class' => 'featured-image' ) );
								} else { ?>
								<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/default.gif" alt="<?php the_title_attribute() ?>" />
						<?php } ?>
      </div>
       
</div>
<div class="moretext"><?php the_content('<span class="moretext">Читать далее</span> '); ?></div> 
</div>

<?php endwhile; wp_reset_query(); ?>

<a class="test1"  href="#">ЧИТАТЬ СТАТЬИ</a>

</div>
</div>

</div><!-- End blogs -->

Написано более трёх лет назад

Комментировать

5 комментариев

ProjectSoft @ProjectSoft

3vgeny, lb-web вам дал самый дельный совет. Попробуйте.

Написано более трёх лет назад
Евгений М @3vgeny Автор вопроса

ProjectSoft, скорее всего для старых браузеров и для IE не подходит, ну и это свойство мне придётся немало поизучать сначала

Написано более трёх лет назад
ProjectSoft @ProjectSoft
3vgeny, если по ТЗ есть задание поддержки IE < 10 то да.
ИЗ старых браузеров только IE. А по статистике остальных 99.5% - просто не пользуются старым Chrome Или те же Opera или FF.
И то, я бы подключил вот с такой конфигурацией Modernizr и при отсутствии поддержки flex применил бы уже костыли.
Типа
.no-flexbox 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; }

А если честно, то уже давно не в моде заниматься некрофелией.
Мы уже давно ставим в условиях разработки - если IE < 10 - то это дорого.
Написано более трёх лет назад
Евгений М @3vgeny Автор вопроса

ProjectSoft, да просто есть условие по ie8,9 . Старое ПО и оборудование увы ещё много где в ходу. Всякие предприятия старые конечно жмотят закупить своим сотрудникам нормальное оборудование или даже обновить ПО. Стоят xp виндовсы с ie8

Написано более трёх лет назад
ProjectSoft @ProjectSoft

3vgeny, вот поэтому и дорого. И объясняем почему.
На эти 7 - 8 просто нереально много костылить нужно, не всё просто решается даже с помощью JS.
И заказчик понимает, если у пользователя старое ПО, то это просто заблудившийся пользователь, а не потенциальный клиент. И таковую статистику собирали. Поведенческий фактор практически нулевой.

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
При загрузке картинки этот блок не имеет размера, как исправить?
- 1 подписчик
- 57 минут назад
- 19 просмотров
0

ответов
CSS

Простой
Как убрать отступ?
- 1 подписчик
- 4 часа назад
- 77 просмотров
2

ответа
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 6 часов назад
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 13 часов назад
- 84 просмотра
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 13 часов назад
- 100 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- вчера
- 78 просмотров
1

ответ
CSS

+1 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- вчера
- 57 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- вчера
- 80 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Разработка VST-плагина

19 апр. 2024, в 20:43

20000 руб./за проект

Нарисовать баннер для интернет-магазина

19 апр. 2024, в 20:35

500 руб./в час

Разработать несистемный алерт

19 апр. 2024, в 20:11

500 руб./за проект

Answer 1 · 2019-02-13 22:15:15

lb-web @lb-web

Забыть о флоатах, почитать о flex. По умолчанию у него у смежных колонок equal height стоит

Ответ написан более трёх лет назад

2 комментария

Answer 2 · 2019-02-13 22:26:30

Andrew Lynx @mRForumman

jQuery как выровнять блоки по высоте

Ответ написан более трёх лет назад

Комментировать

Answer 3 · 2019-02-14 11:16:11

В общем если сделать текст в одну строку, который при зумах не будет делаться в две строки, например в моём случае "читать все статьи" > "все статьи", то тогда можно сделать 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;     
}

Answer 4 · 2019-02-14 12:45:01

webeerer @webeerer

https://codepen.io/ShadowOfCasper/pen/eVyRKv

Ответ написан более трёх лет назад

Комментировать

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

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

Минуточку внимания

Войдите на сайт