浮动 div 宽度的 MPDF 问题
MPDF problems with floated div widths
我有一个问题,我正在努力用 MPDF6 解决
我有一个使用 codeigniter 创建的 Web 应用程序,它显示问卷调查的结果。
我在 html 中生成了简单的堆叠条形图,并使用 jquery 将条形动画化为最终大小。工作正常,没问题。
我希望能够在 MPDF 中复制结果,因此使用相同的 div 理论并相应地调整它们的大小,但这次我使用 php 将宽度设置为内联样式,并且在大多数情况下在我的情况下,这个工作正常,但是,如果值 = 1,则由于某种原因 mpdf 变得时髦,请参见下面的示例图片;
这是我的 php mpdf 报告标记示例
<div class='survey'>
<?php $nw = 390; $w = 400; $tot=0; $totpos=0; $score=0; $cat=0; foreach ($categories as $c) : ?>
<p class='left question'><?php echo $c->category_name; ?></p>
<p class='left perc'><?php echo number_format($summaryAnswers[$cat][6],1); ?>%</p>
<p class='left perc'><?php echo number_format($summaryAnswers[$cat][7],2); ?></p>
<div style='width: <?php echo $w; ?>px;' class='left chart'>
<?php if ($summaryAnswers[$cat][0] > 0) : ?>
<div class='left barchart sagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][0]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][0]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][0]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][1] > 0) : ?>
<div class='left barchart agree' style='width: <?php $width = $nw * $summaryAnswers[$cat][1]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][1]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][1]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][2] > 0) : ?>
<div class='left barchart neither' style='width: <?php $width = $nw * $summaryAnswers[$cat][2]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][2]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][2]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][3] > 0) : ?>
<div class='left barchart disagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][3]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][3]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][3]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][4] > 0) : ?>
<div class='left barchart sdisagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][4]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][4]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][4]; ?></span></div>
<?php endif; ?>
</div>
我已经尝试了 px width 和 %width 这两个选项给我相同的结果...
这里是脚本生成的html,你可以看到每个宽度的值看起来都是正确的
<div class='survey'>
<p class='left question'>Organisation and Culture</p>
<p class='left perc'>66.7%</p>
<p class='left perc'>2.92</p>
<div style='width: 400px;' class='left chart'>
<div class='left barchart sagree' style='width: 97.5px;' tot='24' val='6' ><span class='label'>6</span></div>
<div class='left barchart agree' style='width: 162.5px;' tot='24' val='10' ><span class='label'>10</span></div>
<div class='left barchart neither' style='width: 32.5px;' tot='24' val='2' ><span class='label'>2</span></div>
<div class='left barchart disagree' style='width: 81.25px;' tot='24' val='5' ><span class='label'>5</span></div>
<div class='left barchart sdisagree' style='width: 16.25px;' tot='24' val='1' ><span class='label'>1</span></div>
</div>
<br class='clear' />
css..
.survey { font-size: 10pt; }
.survey .question { width: 47%; padding: 5px 0; }
.survey .perc { width: 5%; margin: 0; padding: 5px 0; }
.survey .no { width: 2%; margin: 0; padding: 5px 0; }
.survey .chart { width: 40%; }
.survey .barchart { padding: 5px 0; }
.barchart .label { margin: 0 0 0 5px; }
div.sagree { background: #2DCC00; }
div.agree { background: #F2E930; }
div.neither { background: #888; }
div.disagree{ background: #FFA519; }
div.sdisagree { background: #FF1919; }
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
有人知道为什么会这样吗?
干杯
通过大量的反复试验,我找到了适合我的解决方案...
我创建了一个容器 div 并使用内联 css 以 % 为单位设置了 div 的宽度,然后容器内的每个浮动 div 被设置为宽度作为 % 有点像这样:
<div style='width: 80%'>
<div style='float: left; width: 20%'>Content</div>
<div style='float: left; width: 30%'>Content</div>
<div style='float: left; width: 40%'>Content</div>
<div style='float: left; width: 10%'>Content</div>
<div style='float: left; width: 5%'>Content</div>
<div style='float: left; width: 15%'>Content</div>
<div style='float: left; width: 40%'>Content</div>
<div style='float: left; width: 40%'>Content</div>
</div>
我只是偶然发现了同样的问题(将较小的宽度设置为 div
,然后 mPDF 将它们变成 100%)。
我的解决方案是将 div
转换为 table,并为每个 td
指定宽度(百分比)。按预期工作。
注意:显然如果内容太宽,它可能会迫使 td
扩展,但即便如此,我们可以让 mPDF 来 fit/resize 内容!
示例:
<table style="width: 100%">
<tr>
<td style="width:20%">20</td>
<td style="width:40%">40</td>
<td style="width:10%">10</td>
<td style="width:5%">5</td>
<td style="width:25%">25</td>
</tr>
</table>
我有一个问题,我正在努力用 MPDF6 解决
我有一个使用 codeigniter 创建的 Web 应用程序,它显示问卷调查的结果。
我在 html 中生成了简单的堆叠条形图,并使用 jquery 将条形动画化为最终大小。工作正常,没问题。
我希望能够在 MPDF 中复制结果,因此使用相同的 div 理论并相应地调整它们的大小,但这次我使用 php 将宽度设置为内联样式,并且在大多数情况下在我的情况下,这个工作正常,但是,如果值 = 1,则由于某种原因 mpdf 变得时髦,请参见下面的示例图片;
这是我的 php mpdf 报告标记示例
<div class='survey'>
<?php $nw = 390; $w = 400; $tot=0; $totpos=0; $score=0; $cat=0; foreach ($categories as $c) : ?>
<p class='left question'><?php echo $c->category_name; ?></p>
<p class='left perc'><?php echo number_format($summaryAnswers[$cat][6],1); ?>%</p>
<p class='left perc'><?php echo number_format($summaryAnswers[$cat][7],2); ?></p>
<div style='width: <?php echo $w; ?>px;' class='left chart'>
<?php if ($summaryAnswers[$cat][0] > 0) : ?>
<div class='left barchart sagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][0]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][0]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][0]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][1] > 0) : ?>
<div class='left barchart agree' style='width: <?php $width = $nw * $summaryAnswers[$cat][1]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][1]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][1]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][2] > 0) : ?>
<div class='left barchart neither' style='width: <?php $width = $nw * $summaryAnswers[$cat][2]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][2]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][2]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][3] > 0) : ?>
<div class='left barchart disagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][3]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][3]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][3]; ?></span></div>
<?php endif; ?>
<?php if ($summaryAnswers[$cat][4] > 0) : ?>
<div class='left barchart sdisagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][4]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][4]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][4]; ?></span></div>
<?php endif; ?>
</div>
我已经尝试了 px width 和 %width 这两个选项给我相同的结果...
这里是脚本生成的html,你可以看到每个宽度的值看起来都是正确的
<div class='survey'>
<p class='left question'>Organisation and Culture</p>
<p class='left perc'>66.7%</p>
<p class='left perc'>2.92</p>
<div style='width: 400px;' class='left chart'>
<div class='left barchart sagree' style='width: 97.5px;' tot='24' val='6' ><span class='label'>6</span></div>
<div class='left barchart agree' style='width: 162.5px;' tot='24' val='10' ><span class='label'>10</span></div>
<div class='left barchart neither' style='width: 32.5px;' tot='24' val='2' ><span class='label'>2</span></div>
<div class='left barchart disagree' style='width: 81.25px;' tot='24' val='5' ><span class='label'>5</span></div>
<div class='left barchart sdisagree' style='width: 16.25px;' tot='24' val='1' ><span class='label'>1</span></div>
</div>
<br class='clear' />
css..
.survey { font-size: 10pt; }
.survey .question { width: 47%; padding: 5px 0; }
.survey .perc { width: 5%; margin: 0; padding: 5px 0; }
.survey .no { width: 2%; margin: 0; padding: 5px 0; }
.survey .chart { width: 40%; }
.survey .barchart { padding: 5px 0; }
.barchart .label { margin: 0 0 0 5px; }
div.sagree { background: #2DCC00; }
div.agree { background: #F2E930; }
div.neither { background: #888; }
div.disagree{ background: #FFA519; }
div.sdisagree { background: #FF1919; }
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
有人知道为什么会这样吗?
干杯
通过大量的反复试验,我找到了适合我的解决方案...
我创建了一个容器 div 并使用内联 css 以 % 为单位设置了 div 的宽度,然后容器内的每个浮动 div 被设置为宽度作为 % 有点像这样:
<div style='width: 80%'>
<div style='float: left; width: 20%'>Content</div>
<div style='float: left; width: 30%'>Content</div>
<div style='float: left; width: 40%'>Content</div>
<div style='float: left; width: 10%'>Content</div>
<div style='float: left; width: 5%'>Content</div>
<div style='float: left; width: 15%'>Content</div>
<div style='float: left; width: 40%'>Content</div>
<div style='float: left; width: 40%'>Content</div>
</div>
我只是偶然发现了同样的问题(将较小的宽度设置为 div
,然后 mPDF 将它们变成 100%)。
我的解决方案是将 div
转换为 table,并为每个 td
指定宽度(百分比)。按预期工作。
注意:显然如果内容太宽,它可能会迫使 td
扩展,但即便如此,我们可以让 mPDF 来 fit/resize 内容!
示例:
<table style="width: 100%">
<tr>
<td style="width:20%">20</td>
<td style="width:40%">40</td>
<td style="width:10%">10</td>
<td style="width:5%">5</td>
<td style="width:25%">25</td>
</tr>
</table>