如何在打印pdf文档时在html文件中放置一列

问题描述 投票:0回答:2

我想在 html 文件中创建一个文档以 pdf 格式打印,但该列不起作用。 我需要图书馆吗?

html dompdf
2个回答
0
投票

这里是示例代码,您可以使用它根据您的数据添加任意数量的行和列。在这个例子中,我定义了一个三列布局。您可以通过指定 repeat() 函数添加任意数量的列。

示例:grid-template-column: repeat(3, 1fr) 会做同样的事 grid-template-columns: 1fr 1fr 1fr;

在下面的示例中,grid-template-columns 属性为网格容器定义了三列,每列的固定宽度为可用空间的 1 分之一,

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Define a three-column layout */
    .row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
    
    
    /* Style the contents of each column */
    .column {
      background-color: #f2f2f2;
      padding: 10px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="column">
      <p>Data1</p>
    </div>
    <div class="column">
      <p>Data2</p>
    </div>
    <div class="column">
      <p>Data3</p>
    </div>
  </div>
  
  <div class="row">
    <div class="column">
      <p>Data1</p>
    </div>
    <div class="column">
      <p>Data2</p>
    </div>
    <div class="column">
      <p>Data3</p>
    </div>
  </div>
  
</body>
</html>


0
投票

您可以使用引导库,检查这个:https://getbootstrap.com/docs/5.0/layout/columns/

© www.soinside.com 2019 - 2024. All rights reserved.