PHP / HTML 根据视口仅显示 x 数量的结果答案

【问题标题】：PHP / HTML displaying only x amount of results depending on viewportPHP / HTML 根据视口仅显示 x 数量的结果
【发布时间】：2015-02-28 09:44:19
【问题描述】：

我正在使用 Bootstrap v3，响应式设计在除此示例之外的任何地方都能完美运行。

我的问题是，当页面被缩放时，它总是显示 5 个 div（正如我希望它与下面的代码一样），无论它占用多少行。

$array = array(1,2,3,4,5);
foreach($array as $row)
{
  echo "<div style='display: inline-block;'>";
    // HTML DIV Content here
  echo "</div>";
}

我想做什么，我不知道它如何计算 1 行或 2 行中可以容纳多少 div。如果 5 可以放入 1 行，则将 5 显示为 1 行。如果 4 可以放入 1 行，则将 8 显示为 2 行。如果 3 可以放在 1 行中，则将 6 显示为 2 行。

所以我的数组可能包含可以显示的最大值（本例中为 8）。

我不确定 bootstrap 是否可以开箱即用，或者 PHP 是否具有此功能。或者，如果我将不得不使用 jQuery 来完成此操作。

当前行为：

预期行为：

【问题讨论】：

你可以使用javascript或者使用display: inline-block
我用图片更新了我的问题。我已经在使用 inline-block

标签： php html css twitter-bootstrap

【解决方案1】：

<table class='table table-responsive           

'>
<tr>
<?php

$array = array(1,2,3,4,5);
foreach($array as $row)
{
  echo "<td>";
// content here
  echo "</td>";
}
?>
</tr>
</table>

使用表格响应而不是 div 类，它将呈现在一行上。

对于我的手机格式不佳或错误深表歉意，这绝不是最好的体验。

或者如果你想通过 div 的大小来控制它会变得更难。您可以通过回显引导 div 类（例如 col-md-3）在每一行中获得相同的数字。如果你想让它知道宽度并且你的身体宽度是已知的，那么浮点数可能会起作用。

【讨论】：