Css grid/flex PDF 格式

Question

我使用barryvdh/laravel-snappy生成pdf，需要在我的pdf文档中创建一个签名区。必须有两个签名字段，因为它是合同 pdf，但是当我使用 css 网格或 flex 时，它们将一个放在另一个下面。如何并排放置？

 <div class="flex-container" style="  display:flex;                    
                    padding: 10px;">
            <div class="flex-item" style="padding: 20px; text-align: center;">
                <h2 style="text-decoration:underline">sign1</h2>                
            </div>
            <div class="flex-item"  style="padding: 20px; text-align: center;">
                <h2 style="text-decoration:underline">sign2</h2>
            </div>                    
    </div>

Answer 1

<div class="flex-container" style=" margin: auto; display:table;                    
                    padding: 10px;border:1px solid red">
            <div class="flex-item" style="padding: 20px; text-align: center;background-color: blue; display: table-cell">
                <h2 style="text-decoration:underline">sign1</h2>                
            </div>
            <div class="flex-item"  style=" margin: auto; padding: 20px; text-align: center;background-color: green; display:table-cell">
                <h2 style="text-decoration:underline">sign2</h2>
            </div>                    
    </div>

是的，我尝试将 HTML with flex 转换为 PDF。这两个容器在两条线上。我的建议是对'.flex-container'使用'display:table'，对'.flex-item使用'display: table-cell'。这对我有用。

Css grid/flex PDF 格式

Css grid/flex in pdf

html

css

laravel

pdf

laravel-snappy