2 列中 floating/inline-block 个元素的间隙问题

Question

我正在处理的页面在 2 列中生成了许多元素，这些元素具有水平时间顺序：

1 2
3 4
5 6
7

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

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

场景 1

如果左边的元素是一个浮点数，如果右边的元素较短，它会漂浮到其他左边元素的右边，因为剩下的space。 See illustration

场景 2

如果左边的元素是一个内联块，它会表现得像一个带有明确属性的浮点数，左右元素之间的大小差异将保持不变"cleared"，而不是被右边的浮动元素占据。这将导致右列中出现笨拙的 space，因为那里的元素似乎想要跟随行内块中新行的开头。 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;
}

2 列中 floating/inline-block 个元素的间隙问题

Gap issue with floating/inline-block elements in 2 columns

css

two-columns

场景 1

场景 2

解决方案