在html表中打印多维关联数组列方式[关闭]

Question

我是 PHP 初学者，我在多维数组中有大量数据

$result = 
array
    (
    array(
        array("name" => "Volvo", "price" => 2222, "model" =>18),
        array("name" => "Tata", "price" => 2222, "model" =>18),
        array("name" => "Asoka", "price" => 2222, "model" =>18),
        ),
    array(
        array("name" => "BMW", "price" => 2222, "model" =>17),
        array("name" => "Benz", "price" => 2222, "model" =>17),
        array("name" => "Maroti", "price" => 2222, "model" =>17),
        ),
    array(
        array("name" => "porse", "price" => 25648, "model" =>16),
        array("name" => "farari", "price" => 25486, "model" =>16),
        array("name" => "Volvo", "price" => 25422, "model" =>16),
        ),

    );

我使用 foreach 循环遍历数组，并打印模型行方式，

foreach($result as $k => $datas){
         echo $datas[$k]['model'].'-->';
            foreach($datas as $key => $data){
             //print_r($data);
                 echo $data['price'] ;
                 echo $data['name'].'-*-';
              }
              echo '<br>';
         }

当我运行这段代码时，我会收到以下输出：

18-->2222Volvo-*-2222Tata-*-2222Asoka-*-
17-->2222BMW-*-2222Benz-*-2222Maroti-*-
16-->25648porse-*-25486farari-*-25422Volvo-*-

但是，我正在尝试在 html 表中以与以下类似的方式打印此数组的列方式：

   18   -->     17   -->    16-->
2222-Volvo  2222-BMW      25648-porse
2222-Tata   2222-Benz     25486-farari
2222Asoka   2222-Maroti   25422-Volvo

Answer 1

试试这个：

<div style='display:flex; flex-direction: row; flex-wrap: wrap;'>

<?php
foreach($result as $k => $datas){
    echo "<div style='display:flex; flex-direction: column;'>";
    echo  "<div>" . $datas[$k]['model'] . "--></div>";
    foreach($datas as $key => $data){
        //print_r($data);
        echo "<div>" . $data['price'] . "-" . $data['name'] . "</div>" ;
    }
    echo '</div>';
}
?>

</div>

输出是：

如你所见，逻辑是纯 HTML/CSS ：

• 首先，我将您的数据包装在一个 flex 容器中，其方向为 row 和 wrap，因此如果您有很多元素，它们会走在下一行。
• 现在在您的 foreach 中，每个元素都被包裹在另一个 flex div 中，但方向为 column ：因此该元素中的每个新 div 都将显示在上一个。
• 里面的所有 div 都是简单的 div，现在轮到你做一些 css 来使文本居中，添加填充或其他任何东西

这是你所期待的吗？如果您对 flexbox 有疑问，请查看：https://css-tricks.com/snippets/css/a-guide-to-flexbox/