Div надавите содержание одноранговых

Question

У меня есть эта установка моих элементов http://codepen.io/Py89/pen/QbKgWv?editors=110

HTML:

<div class="container"> 

    <div class="item-container" id="right-block"> 
    <div class="row"> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
    </div> 
    <!-- #Row --> 
    <div class="row"> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
    </div> 
    <!-- #Row --> 
    </div> 
    <!-- #Item container --> 

    <div class="item-container" id="left-block"> 
    <div class="row"> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
      <h3>More text</h3> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
      <h3>More text</h3> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
      <h3>More text</h3> 
     </div> 
     </div> 
     <!-- #Item --> 
    </div> 
    <!-- #Row --> 
    <div class="row"> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
     <div class="media"> 
     <div class="media__item"> 
      <img src="http://placekitten.com/g/200/300" alt="" /> 
     </div> 
     <div class="media__body"> 
      <h2>Some text</h2> 
     </div> 
     </div> 
     <!-- #Item --> 
    </div> 
    <!-- #Row --> 
    </div> 
    <!-- #Item container --> 

</div> 

CSS:

.container { 
    *zoom: 1; 
} 
.container:before, .container:after { 
    content: ""; 
    display: table; 
} 
.container:after { 
    clear: both; 
} 

.container { 
    width: 80%; 
    margin: 20px auto; 
    background: rgba(100, 100, 100, 0.4); 
} 

.item-container { 
    float: right; 
    width: 50%; 
} 

.media { 
    background: rgba(30, 40, 50, 0.4); 
    float: right; 
    overflow: hidden; 
    margin: 0 10px 50px; 
    padding: 10px; 
} 
.media .media__item { 
    width: 100%; 
} 
.media .media__item img { 
    margin: 0 auto; 
} 
.media .media__body { 
    width: 100%; 
    padding-top: 10px; 
    overflow: hidden; 
} 

h2 { 
    margin: 0 0 10px; 
    text-align: center; 
} 

h3 { 
    margin: 0; 
    text-align: center; 
} 

#left-block { 
    background: rgba(200, 10, 50, 0.3); 
} 

#right-block { 
    background: rgba(50, 200, 100, 0.3); 
} 

ли это вообще возможно для дивы в второй рядправый, чтобы получить толкаемый вниз ту же сумму, что и divs на осталось?

Я знаю, что это можно сделать с помощью jQuery/JavaScript, но мне интересно, может ли это быть сделано исключительно с помощью CSS.

Имейте в виду, что я не могу изменить базовую разметку HTML.

Answer 1

В этом случае самый простой способ - дать высоту контейнеру.

.media { 
    background: rgba(30, 40, 50, 0.4); 
    float: right; 
    overflow: hidden; 
    margin: 0 10px 50px; 
    padding: 10px; 
    height:420px;//add this 
    } 
//could also place it on '.media .media__body' 

http://codepen.io/maio/pen/PqGjam

Answer 2

Или, вы можете добавить:

<h3><br></h3> 

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

ЭТО ВАША DIVS с двумя линиями текста:

<h2>Some text</h2> 
<h3>More text</h3> 

И ДЛЯ DIVS С одной строки текста добавить следующее:

<h2>Some text</h2> 
<h3><br></h3> 

Я надеюсь, что это помогает ... .

Answer 3

Есть два угла здесь, относительно типа контента на странице:

• Динамический контент:

  С предоставленному макета HTML, вы не может получить желаемого результата. Это потому, что у вас есть два разных контейнера узлов с (предположительно) динамическим контентом и нет возможности связать их в css.

• Статическое содержимое:

  Как сказал maioman, вы можете легко установить высоту до контейнера, но я рекомендую установить в классе строки.