如何设置每行 4 个项目？ (PHP/HTML/CSS) 非表
Posted
技术标签:
【中文标题】如何设置每行 4 个项目？ (PHP/HTML/CSS) 非表【英文标题】：How can I set 4 items per row? (PHP/HTML/CSS) non table 【发布时间】：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.'" />
<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>标签，但我的不像表格，我只有一个值要显示。
那么，在这种情况下，我怎样才能使打印布局固定每个元素的宽度，并且可以固定每行元素的数量？
【问题讨论】：
【参考方案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++;以上是关于如何设置每行 4 个项目？ (PHP/HTML/CSS) 非表的主要内容，如果未能解决你的问题，请参考以下文章
如何设置 ListView 项目单击使用开关位置在单独类的视频视图中每行播放一个本地视频文件？