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

Question

[Евгений М]

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

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

Answer 1

[lb-web]

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

Comments

[Михаил Власов]

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

[Евгений М]

Михаил Власов, к сожалению такое решение не подходит, или я просто не могу правильно всё переделать. Дело в том что в родительском блоке цикл и там не только картинка, но на ней и тайтл и стиль затемнения и текст под картинками и ссылки. Если поставить 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 -->

Answer 2

[Andrew Lynx]

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

Answer 3

[Евгений М]

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

Comments

[ProjectSoft]

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

[Евгений М]

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

[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 - то это дорого.

[Евгений М]

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

[ProjectSoft]

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

Answer 4

[webeerer]

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