Question

我有一个问题，我正在努力解决MPDF6

我有一个使用codeigniter创建的Web应用程序，它显示问卷调查的结果。

我在html中生成了简单的堆积条形图，并使用jquery将条形图设置为最终尺寸。工作正常，没问题。

我希望能够在MPDF中复制结果，所以使用相同的div理论并相应地调整它们，但这次我使用php将宽度设置为内联样式，并且在大多数情况下我的工作正常但是，如果值= 1，那么由于某种原因，mpdf变得很时髦，请参见下面的示例图片;

以下是我的mpdf报告的php标记示例

<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宽度和％宽度这两个选项都给我相同的结果......

这里是脚本生成的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; }

任何人都知道为什么会发生这种情况？

欢呼声

Answer 1

我偶然发现同样的问题（将较小的宽度放到div，将mPDF放到100％）。

我的解决方案是将div转换为表格，并为每个td提供宽度（百分比）。按预期工作。

注意：显然如果内容太宽，可能会强制td扩展，但即便如此，我们也可以使用mPDF来调整内容的大小！

示例：

<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>

Answer 2

通过大量的反复试验，我找到了一个对我有用的解决方案......

我创建了一个容器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问题

2 个答案: