在 wkhtmltopdf 中使用 Flex/CSS [英] Using Flex/CSS with wkhtmltopdf

问题描述

我已经在我的 HTML 页面上使用以下带有 flexbox 的答案成功创建了一个列表 如何在 flexbox 中每行显示 3 个项目?

I've successfully created a list using the following answer with flexbox on my HTML page How to display 3 items per row in flexbox?

我需要用这些数据创建一个 PDF，我正在使用 wkhtmltopdf (https://wkhtmltopdf.org/) 也可以正常工作，但是生成的 PDF 将我所有的列表项放在 1 个长列中，而不是每行 3 个.

I have a need to create a PDF with this data and I'm using wkhtmltopdf (https://wkhtmltopdf.org/) which also works fine however the PDF generated has all my List Items in 1 long column instead of 3 per row.

看起来在生成 PDF 时没有处理 CSS，任何见解都值得赞赏.

Looks like the CSS is not being processed when the PDF generation is happening any insight is appreciated.

推荐答案

这对我有用:

.row {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    -webkit-box-pack: center; /* wkhtmltopdf uses this one */
    justify-content: center;
}

.row > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.row > div:last-child {
    margin-right: 0;
}

参见 https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522了解更多信息.

这篇关于在 wkhtmltopdf 中使用 Flex/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！