html - 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);
}

右侧 的第二行 中的div 是否有可能与左侧 的div 向下推相同的量强> ?

我知道它可以用 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