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

Answer 2

或者，您可以添加：

<h3><br></h3>

到只有一行文字的div。额外的休息将呈现为图片下方的两行文字，因此高度将完全匹配。像这样：

这是你的双方有两条文字：

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

对于有一行文字的DIVS添加：

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

我希望它有所帮助....

Answer 3

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

动态内容：

使用提供的html布局，您无法获取期望的结果。那是因为你有两个不同的容器具有（推测）动态内容的节点，无法将它们链接起来的CSS。
静态内容：

正如maioman所说，你可以轻松地设置一个高度容器，但我建议设置为行类。

Div推下兄弟姐妹的内容

3 个答案: