2列中浮动/内联块元素的间隙问题

Question

我正在处理的页面在 2 列中生成了许多元素，它们的水平年表如下：

1 2
3 4
5 6
7

由于列具有垂直年表，我实际上并没有使用列，而是使用各种浮动元素或内联块。

但是，由于生成的元素具有用户指定的内容，因此具有不可预测的高度，这会导致许多问题：

场景 1

如果左边的元素是一个浮点数，如果右边的元素较短，它将浮动到其他左边元素的右边，因为剩下的空间更多。 See illustration

场景 2

如果左元素是一个内联块，它会像一个具有clear属性的浮点数一样，左右元素之间的大小差异将保持“清除”，而不是被右浮动元素。 这将导致右列中出现尴尬的空间，因为那里的元素似乎想要跟随内联块上新行的开头。 See illustration

所需的最终结果类似于场景 2，但没有差距。有什么办法可以让2列不互相干扰吗？

解决方案

请参阅所选答案以了解如何将数组拆分为 2。 然后只需将 2 个数组中的每一个都包装在一个带有 float:left/right 属性的列元素中，就可以开始了。

Answer 1

由于您的数据似乎不是很大，因此您有两条非常简单的路线可供选择。

其中之一是将数据集拆分为两个数组，每个数组包含各自的项目，例如：

$arrO = [];
$arrE = [];
$odd = true;
while($row = $result->fetch_assoc()){
  if($odd) $arrO[] = $row;
  else $arrE[] = $row;
  $odd = !$odd;
}

另一种选择是在数据集上循环两次并只选择您感兴趣的行：

$results = $result->fetch_all();
$odd = true;
foreach($results as $row){
  if($odd) //print something, or whatever :)
  $odd = !$odd;
}
$odd = true;
foreach($results as $row){
  if(!$odd) //print something, or whatever :)
  $odd = !$odd;
}