使用barryvdh/laravel-snappy生成PDF时，如何通过CSS Grid/Flex实现双签名区域并排布局？

嘿，我之前也踩过laravel-snappy生成PDF时布局不符合预期的坑！其实核心问题是它底层依赖的wkhtmltopdf对CSS的渲染逻辑和浏览器有差异，你的Flex布局代码本身在浏览器里没问题，但到了PDF生成环境就“失效”了。

给你两个靠谱的解决方案，亲测有效：

方案一：优化Flex布局（优先尝试） #

给容器明确设置宽度，同时给每个签名项加上flex:1让它们平分空间，这样wkhtmltopdf就能正确识别并排布局了：

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

方案二：用Float布局兜底（如果Flex还是不行） #

wkhtmltopdf对Float的支持比Flex更稳定，用这个方案基本不会翻车：

<div class="sign-container" style="width: 100%; padding: 10px; overflow: hidden;">
    <div class="sign-item" style="width: 50%; float: left; padding: 20px; text-align: center; box-sizing: border-box;">
        <h2 style="text-decoration:underline">sign1</h2>
    </div>
    <div class="sign-item" style="width: 50%; float: left; padding: 20px; text-align: center; box-sizing: border-box;">
        <h2 style="text-decoration:underline">sign2</h2>
    </div>
</div>

关键注意点 #

• 不管用哪种布局，都要给容器设置width:100%，否则wkhtmltopdf可能会把容器宽度收缩到内容宽度
• Float方案里一定要加box-sizing: border-box;，避免padding把元素宽度撑破导致换行

内容的提问来源于stack exchange，提问作者wertyu