CSS calc() 在 wkhtmltopdf 0.12.4 中不起作用

Question

我正在使用 wkhtmltopdf 0.12.4(带有修补的 qt)(带有节点 js) 生成我的 html 预览 pdf。

这很好用

<div style="width: 20%;);>
   Test Element
</div>

但这在 wkhtmltopdf 中并不适用(这在其他浏览器中运行良好)

<div style="width: calc(100% / 5);width: -webkit-calc(100% / 5);>
   Test Element
</div>

css3 calc() 函数是否有任何解决方法？我的 wkhtmltopdf 版本是否支持它？

Answer 1

您可以使用 flex 属性。我考虑过至少应该有 2 个 div，每个 width:50%。如果您将在 flexRow 中添加更多具有相同宽度的 div，它将进行调整。如果有可能连续出现单个 div，则更新flexChild 宽度 到 100%。它运行良好。

.flexRow{
  display:flex;
  width:100%;
  padding:15px;
  background-color:red;
  height:100px;
}
.flexChild{
  display:block;
  background-color:#000;
  width:50%;
  border:1px solid #fff;
}

<div class="flexRow">
  <div class="flexChild"></div>
  <div class="flexChild"></div>
  <div class="flexChild"></div>
  <div class="flexChild"></div>
</div>