我想打印出来的结果可以是每列都有固定的行，比如每行有4个元素
My code:
<!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>标签，但我的不像表格，我只有一个值要显示。
那么，在这种情况下，我怎样才能使打印布局固定每个元素的宽度并固定每行元素的数量？
最佳答案
我认为您只需使用 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使用固定宽度的容器。
关于php - 如何每行设置 4 个元素？ (PHP/HTML/CSS) 非表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58561950/