2列

Question

我正在处理的页面在2列中生成了许多元素，其中包含水平年表：

1 2
3 4
5 6
7

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

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

场景1

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

场景2

如果左边的元素是一个内联块，它就好像是一个带有clear属性的float，左边和右边元素之间的大小差异将保持＆＃34;清除＆＃34;而不是由正确的浮动元素占据。 这将导致右列中的空格笨拙，因为那里的元素似乎想要跟随内联块上的新行的开始。 See illustration

期望的最终结果类似于方案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;
}