Div下推兄弟的内容

我的元素是这样设置的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标记

在这种情况下，最简单的方法是给容器指定一个高度。

.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

关于页面内容的类型，这里有两个角度:

使用提供的html布局，无法获得期望的结果。这是因为u有两个不同的容器具有(大概)动态内容的节点，并且无法将它们链接起来css。
正如maioman所说，你可以很容易地设置高度

或者，您可以添加:

<h3><br></h3>

放到只有一行文本的div中。额外的休息将被渲染为图片下面的两行文本，因此高度将完全匹配。这样的:

这是你的div，有两行文本:

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

对于只有一行文本的div添加:

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

希望对您有所帮助....

相关内容

最新更新

热门标签：