布局Dompdf CSS列超出纸张范围

问题描述

我已经使用dompdf打印了pdf，并且使用了基本的html，但是右侧纸张上有问题，如该屏幕截图所示，我的专栏用纸了

或在此链接image上。此图显示了列，并且此左边正确，但在右边超出范围。我需要像这样左侧创建，但我不知道如何。

这是我的代码：

CSS

<style>
* {
  Box-sizing: border-Box;
}

/* Create two equal columns that floats next to each other */
.columnA {
  float: left;
  width: 68.7%;
  padding: 10px;
  height: 200px; /* Should be removed. Only for demonstration */
  border: 1px solid black;
}

.columnB {
  float: left;
  width: 68.7%;
  padding: 10px;
  height: 120px; /* Should be removed. Only for demonstration */
  border: 1px solid black;
}

.columnC {
  float: left;
  width: 33.3%;
  padding: 10px;
  height: 200px; /* Should be removed. Only for demonstration */
  border: 1px solid black;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>

列

<div class="row">
  <div class="columnA" style="background-color:white;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="columnA" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>
<div class="row">
  <div class="columnB" style="background-color:white;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="columnB" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
 
</div>
<div class="row">
  <div class="columnC" style="background-color:white;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="columnC" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="columnC" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
 
</div>

我尝试进行此更改，此css浮动使其发生变化，但是我可以正确执行，有人可以帮忙吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）