php - CSS/PHP : How to make left and right float div the same height regardless of much information is in them?

Question

如何使左右浮动 div 的高度相同，而不管它们中有多少信息？ div 的数量以及其中的信息是动态创建的，左右交替。

<div class="columns">
  <?php
   $cemp = true;
   foreach ( $req_user_emp as $id => $name ) {
     echo "<div ".(($cemp = !$cemp)?" class=\"column_right\"":" class=\"column_left\"").">";
     echo "<h3>".$req_user_emp[$id]['position']."</h3>";
     echo "<h4>".$req_user_emp[$id]['company_name']."</h4>";
     echo $req_user_emp[$id]['description'];
     echo "<div class=\"column_footer\">".$req_user_emp[$id]['start_date']." → ".$req_user_emp[$id]['end_date']."</div></div>";
   }
  ?>
</div>

和CSS

.columns {
  width: auto;
  margin-left: -10px;
}
.columns:after {
  content: "If you can see this, you broke the columns!";
  width: auto;
  display: block;
  text-indent: -10000000px;
  height: 1px;
  clear: both;
  margin-bottom: -20px;
}
.row_level {
  display:table-cell;
}
.column_left {
  width: 288px;
  float: left;
  background: #e1e1e1;
  padding: 20px;
  border: 1px solid #d1d1d1;
  margin-bottom: 20px;
}
.column_right {
  width: 288px;
  float: right;
  padding: 20px;
  background: #e1e1e1;
  border: 1px solid #d1d1d1;
  margin-bottom: 20px;
}

现在我在 MySQL 中有一些数据，我想将它们排列到这两列中。该代码有效，但如果列中的数据不相等，则列排列不正确。你知道如何解决这个问题吗？我也在考虑在 foreach 函数中使用 if :

 if ( $i % 2 == 0 ) {
   ENTER_MY_CODE_HERE;
 }

并像这样为 .left 和 .right 使用 .row_level 容器，但据我所知这在 IE 中不起作用(我现在无法测试它)。

谢谢

Answer 1

没有简单的方法可以使所有 float 元素的高度达到 100%。最好的方法是 height: 100% 或 top: 0; bottom: x; 如果高度已知。否则，您正在考虑使用视觉技巧。