如何设置每行 4 个项目？ (PHP/HTML/CSS) 非表答案

【问题标题】：How can I set 4 items per row? (PHP/HTML/CSS) non table如何设置每行 4 个项目？ (PHP/HTML/CSS) 非表
【发布时间】：2020-02-22 00:12:33
【问题描述】：

我想打印出结果可以是每列有固定的行，就像每行有4个元素

我的代码：

<!DOCTYPE html>

<html>

<head>
    <title>Print your data</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <style>
        * {
            font-family: Arial;
        }
        p.inline {
            display: inline-block;
        }
        span { 
            font-size: 13px;
        }
        .grid-container { 
            position: relative;
            display: inline-block; 
        }
        .a { 
            position: relative;
            display: inline-block;
            margin: 15px;
        }
        .print {
            margin-top: 10px;
            background-color: navy;
            color: white;
        }
        .print:hover {
            color: white;
            background-color: black;
        }
    </style>

    <style type="text/css" media="print">
        @page 
        {
            size: auto;   /* auto is the initial value */
            margin: 1mm;  /* this affects the margin in the printer settings */

        }
        .grid-container { 
            position: relative;
            display: inline-block;
        }
        .a { 
            position: relative;
            display: inline-block;
            margin: 15px;
        }
        .print {
            display: none;
        }
    </style>
</head>

<body>
    <div class="col text-center">
        <button onclick="window.print();" class="print btn btn-lg">Print your data</button>
    </div>
    <div style="margin: 1%">

            <?php
            require 'vendor/autoload.php';

                $row = 1;
                if (($csvfile = fopen($_FILES['file']['tmp_name'], "r")) !== FALSE) {
                    while (($csvdata = fgetcsv($csvfile, 1000, ",")) !== FALSE) {

                        $colcount = count($csvdata);

                        //Skip the CSV first line, start read from second line
                        if($row == 1) {

                            $row++; continue; 
                        }

                        if($colcount!=5) {
                            $error = 'Column count incorrect';
                        } else {

                            $imageData = base64_encode(file_get_contents($csvdata[4]));
                            $generator = new \Picqer\Barcode\BarcodeGeneratorPNG();
                                echo '<div class="grid-container">';
                                echo '<div class="a">
                                      <img src="data:image;base64,'.$imageData.'" width="50"/>
                                      <div><b>Item: '.$csvdata[0].'</b></div>
                                      <div>
                                      <img src="data:image/png;base64,' . base64_encode($generator->getBarcode("$csvdata[1]", $generator::TYPE_CODE_128)) . '"/>
                                      <div><b>'.$csvdata[1].'</b></div>
                                      </div>
                                      <span><b>Price: '.$csvdata[2].'</b></span>
                                      <div>
                                      <span><b>Desc: </b>'.$csvdata[3].'</span>
                                      </div>
                                      </div></div>';
                        }
                    }
                    fclose($csvfile);
                }
            ?>
    </div>
</body>
</html>

现在打印结果：

结果图片：

我想要打印结果：

我想要结果图片 1：

我想要结果图片 2：

我在网上查了这个例子，但大多数例子都有不同的<tr>标签，但我的不像表格，我只有一个值要显示。

那么，在这种情况下，我怎样才能使打印布局固定每个元素的宽度，并且可以固定每行元素的数量？

【问题讨论】：

标签： php html css layout printing

【解决方案1】：

我认为只需使用 4 列的表格就可以很好地为您服务。示例：

<table>
  <thead>
   <tr>
     <th>Header 1</th>
     <th>Header 2</th>
     <th>Header 3</th>
     <th>Header 4</th>
   </tr>
</thead>
  <tr>
    <td>Cell1 </td>
    <td>Cell2 </td>
    <td>Cell3 </td>
    <td>Cell 4</td>
  </tr>
  <tr>
     <td>Row 2, Cell1</td>
     <td>Row 2, C2</td>
     <td>Row 2, C3</td>
     <td>Row 2, C4</td>
  </tr>
</table>

每个 TR 将包含表中列所需的尽可能多的 TD。每个 TR 为一行。

对于更高级的方法，您可以将flexbox 与固定宽度的容器一起使用。

【讨论】：

但是我没有使用表格来完成我的代码，所以我想知道我可以使用其他方式来修复我的值的宽度吗？

【解决方案2】：

您可以通过以下几种方式做到这一点。

首先使用 css，例如您可以将每个设置为宽度 20% 并使用 display: flex 将它们放入容器中，如下所示：

.container { display: flex; flex-wrap: wrap; }
.each { width: 20%; }

<div class="container">
  <div class="each">1</div>
  <div class="each">2</div>
  <div class="each">3</div>
  <div class="each">4</div>
  <div class="each">5</div>
  <div class="each">1</div>
  <div class="each">2</div>
  <div class="each">3</div>
  <div class="each">4</div>
  <div class="each">5</div>
  <div class="each">1</div>
  <div class="each">2</div>
  <div class="each">3</div>
  <div class="each">4</div>
  <div class="each">5</div>
</div>

第二种方式，使用 PHP 方式，您可以使用 % 模运算符来解决这个问题。在此处了解更多信息：https://www.php.net/manual/en/language.operators.arithmetic.php

例如在循环设置索引之前，例如$i = 0; 然后为每一行增加 $++; 在此之下，您可以在代码中检测这是否是带有if ($i % 5 === 1) 的5 个中的第一个，对于5 个中的最后一行，您可以使用if ($i % 5 === 0)

在这些 if 语句中，您可以将块拆分为新行或拆分您需要的任何容器 div 行等。

但是我认为 css 方法是提供的 2 种方法中最简单和更好的方法。希望这会有所帮助。

【讨论】：

我试过你的css方式，但我的结果是每个元素只有一行，像一行一样显示。如果我用PHP的方式来做，我为什么要放这两个代码呢？我是 PHP 新手。谢谢。
嗨@KC-L，不用担心。如果您还没有尝试用 css 方式尝试的另一件事是尝试用 <div class="grid-container"> 替换 <div style="margin: 1%"> 并取出循环内的
的回声以及最后一个关闭
也在里面回显，这样它就是整个网格周围的容器。而不是每个元素。然后将我的 .container css 设置为您的 .grid-container，将我的 .each css 设置为您的 .a 类。
或者使用 php 方式，例如，您可以在每 5 个元素后添加一个
并使用 if ($i % 5 === 0) echo '<br>';，这会将其换行。
用php的方式，你的意思是在if($colcount!=5)之前，我应该加上$i=0;，然后在最后我应该加上$i++？ `
回顾您的代码，我想我们可以使用 $row 代替 $i，但将其更改，并且 if 语句检查第一行从 1 到 0。然后在 while 的底部循环你需要运行 $row++;