CSS两个相等的列，动态高度

Question

我的问题是如何安排每个元素来实现这个输出？请注意，每个项目都是动态生成的。由于框架限制，不支持flex。

.col {
  display: block;
  float: left;
}

.w50 {
  width: 50%
}

<div class="col">

  <div class="col w50" style="background-color: #aaa">
    <div>
      <strong>Item 1</strong>
    </div>
    <div>
      <span>Remarks : Bacon ipsum dolor amet buffalo prosciutto doner biltong kevin porchetta, spare ribs meatloaf shankle. </span>
    </div>
  </div>


  <div class="col w50" style="background-color: #bbb">
    <div>
      <strong>Item 2</strong>
    </div>
    <div>
      <span>Remarks : Hello world</span>
    </div>
  </div>


  <div class="col w50" style="background-color: #ccc">
    <div>
      <strong>Item 3</strong>
    </div>
    <div>
      <span>Remarks : Sample</span>
    </div>
  </div>


  <div class="col w50" style="background-color: #ddd">
    <div>
      <strong>Item 4</strong>
    </div>
    <div>
      <span>Remarks : Hello world</span>
    </div>
  </div>


</div>

Answer 1

由于您无法手动将父元素添加到此页面，因此您必须将它们浮动。要将它们带到堆栈，您可以将clear: both应用于第二行的第一个元素（第三行）。

你的最后一项任务是让他们拥有相同的身高。为此，当您的整体父容器col具有overflow hidden时，您应用任意边距和填充。特别值得一提的是这篇文章here

.col {
  overflow: hidden;
}

.w50 {
  width: 50%;
  margin-bottom: -500px;
  padding-bottom: 500px;
  float: left;
}

.w50:nth-of-type(3n) {
  clear: both;
}

<div class="col">
  <div class="col w50" style="background-color: #aaa">
    <div>
      <strong>Item 1</strong>
    </div>
    <div>
      <span>Remarks : Bacon ipsum dolor amet buffalo prosciutto doner biltong kevin porchetta, spare ribs meatloaf shankle. </span>
    </div>
  </div>


  <div class="col w50" style="background-color: #bbb">
    <div>
      <strong>Item 2</strong>
    </div>
    <div>
      <span>Remarks : Hello world</span>
    </div>
  </div>


  <div class="col w50" style="background-color: #ccc">
    <div>
      <strong>Item 3</strong>
    </div>
    <div>
      <span>Remarks : Sample</span>
    </div>
  </div>


  <div class="col w50" style="background-color: #ddd">
    <div>
      <strong>Item 4</strong>
    </div>
    <div>
      <span>Remarks : Hello world</span>
    </div>
  </div>
</div>