Выравнивание блоков по высоте CSS/jQuery

342

22 февраля 2017, 20:08

Здравствуйте, верстая одну из страниц сайта,столкнулся з проблемой выравнивания блока по выcоте. Есть три блока. Первый,с текстом,контент здесь может меняться. Второй,с картинкой имеет по высоте фиксированое значение (450px). Третий,должен иметь высоту равную суме первых двух блоков. Для этого написал простенький скрипт. Проблема в том что он работает только один раз с первым блоком,а блоков-секций может быть множество. Подскажите пожалуйста,почему так происходит и как это можно решить?

var height_block = $('.jHeight').outerHeight();
$('.block_img_big').css("height",height_block);

Пример на codepen

Answer 1

Нужно по отдельности пройтись по всем .jHeight, поскольку у них разные высоты, найти .block_img_big, которые принадлежат данному .jHeight и выставить им определенную высоту.

$('.jHeight').each(function(i,v) { 
  var h = $(v).outerHeight(); 
  var block_img_big = $(v).parent().find('.block_img_big'); 
  block_img_big.css("height",h+'px'); 
});

.text_block{ 
  padding: 20px; 
  borger: 1px solid red; 
  margin:  10px; 
} 
 
.block_img_small{ 
  height:  450px; 
  background-color: pink; 
} 
.block_img_big{ 
  height:  450px; 
  background-color: grey; 
} 
 
h1{ 
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1>Block 1</h1> 
<div class="row"> 
    <div class="large-6 column jHeight"> 
         <div class="row"> 
              <div class="large-12 column text_block"> 
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit sed, odio, asperiores ipsa quaerat quam aliquid tenetur veniam ea quidem, molestiae ratione quas, voluptatum cumque et inventore? Aperiam placeat, consectetur?</p> 
             </div> 
             <div class="large-12 column"> 
                   <div class="block_img_small"></div> 
             </div> 
          </div> 
    </div> 
    <div class="large-6 column"> 
       <div class="block_img_big"></div> 
    </div> 
</div> 
 
<h1>Block 2</h1> 
<div class="row"> 
    <div class="large-6 column jHeight"> 
         <div class="row"> 
              <div class="large-12 column text_block"> 
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit sed, odio, asperiores ipsa quaerat quam aliquid tenetur veniam ea quidem, molestiae ratione quas, voluptatum cumque et inventore? Aperiam placeat, consectetur?</p> 
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit sed, odio, asperiores ipsa quaerat quam aliquid tenetur veniam ea quidem, molestiae ratione quas, voluptatum cumque et inventore? Aperiam placeat, consectetur?</p> 
             </div> 
             <div class="large-12 column"> 
                   <div class="block_img_small"></div> 
             </div> 
          </div> 
    </div> 
    <div class="large-6 column"> 
       <div class="block_img_big"></div> 
    </div> 
</div> 
<h1>Block 3</h1> 
<div class="row"> 
    <div class="large-6 column jHeight"> 
         <div class="row"> 
              <div class="large-12 column text_block"> 
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit sed, odio, asperiores ipsa quaerat quam aliquid tenetur veniam ea quidem, molestiae ratione quas, voluptatum cumque et inventore? Aperiam placeat, consectetur?</p> 
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit sed, odio, asperiores ipsa quaerat quam aliquid tenetur veniam ea quidem, molestiae ratione quas, voluptatum cumque et inventore? Aperiam placeat, consectetur?</p> 
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit sed, odio, asperiores ipsa quaerat quam aliquid tenetur veniam ea quidem, molestiae ratione quas, voluptatum cumque et inventore? Aperiam placeat, consectetur?</p> 
             </div> 
             <div class="large-12 column"> 
                   <div class="block_img_small"></div> 
             </div> 
          </div> 
    </div> 
    <div class="large-6 column"> 
       <div class="block_img_big"></div> 
    </div> 
</div>