我想在 html 文件中创建一个文档以 pdf 格式打印,但该列不起作用。 我需要图书馆吗?
这里是示例代码,您可以使用它根据您的数据添加任意数量的行和列。在这个例子中,我定义了一个三列布局。您可以通过指定 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>
您可以使用引导库,检查这个:https://getbootstrap.com/docs/5.0/layout/columns/