PDF文档打印中如何在HTML文件中加入列

7rtdyuoh 于 2023-05-12 发布在其他

关注(0)|答案(2)|浏览(106)

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

Html

来源：https://stackoverflow.com/questions/76192264/how-to-put-a-column-in-html-file-in-printing-of-pdf-document

2条答案

按热度按时间

fykwrbwg1#

下面是示例代码，您可以使用它根据数据添加任意多的行和列。在本例中，我定义了一个三列布局。您可以通过指定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）回复(0）举报 2023-05-12

vnjpjtjt2#

你可以使用bootstrap库，检查一下：https://getbootstrap.com/docs/5.0/layout/columns/

赞(0）回复(0）举报 2023-05-12