如何用HTML/CSS实现适配Dom PDF导出的右往左填充条形图

当前左右50%分栏的基础结构是合理的，只需针对DomPDF的CSS兼容限制、负数值的填充锚定逻辑做调整，就能实现负值从0刻度线向左填充的条形效果。

核心调整逻辑 #

• 以左右两个50%宽度区块的相邻边作为正负值的0刻度基准，消除区块之间的渲染缝隙
• 负数值区块的填充条锚定在0刻度位置，向左延伸，不需要额外复杂定位
• 全部使用DomPDF原生支持的inline-block、float、百分比宽度实现布局，规避flex、grid、绝对定位等DomPDF支持不稳定的特性

调整后可直接运行的代码 #

<td width="400px">
    <div style="width:100%; font-size:0; margin:10px 0 2px 0;">
        <!-- 左半区：负值展示区域，占总宽度50% -->
        <div style="width:50%; display:inline-block; font-size:12px; vertical-align:middle;">
            <!-- 灰色背景轨道：铺满左半区宽度，固定高度避免错位 -->
            <div class="w3-light-grey w3-round-large" style="width:100%; height:20px; padding:0;">
                <!-- 负值填充条：靠右锚定到轨道右边缘（即0刻度线），宽度根据负值占最大负量程的比例计算 -->
                <div 
                    class="w3-container w3-blue w3-round-large" 
                    style="width: {{abs($negative_val / $max_negative) * 100}}%; float: right; line-height: 20px; text-align: center; margin:0;"
                >
                    {{$negative_val}}
                </div>
            </div>
        </div>
        <!-- 右半区：正值展示区域，占总宽度50% -->
        <div style="width:50%; display:inline-block; font-size:12px; vertical-align:middle;">
            <!-- 灰色背景轨道：铺满右半区宽度 -->
            <div class="w3-light-grey w3-round-large" style="width:100%; height:20px; padding:0;">
                <!-- 正值填充条：靠左锚定到轨道左边缘（即0刻度线），宽度根据正值占最大正量程的比例计算 -->
                <div 
                    class="w3-container w3-blue w3-round-large" 
                    style="width: {{$positive_val / $max_positive * 100}}%; float: left; line-height: 20px; text-align: center; margin:0;"
                >
                    {{$positive_val}}
                </div>
            </div>
        </div>
    </div>
</td>

关键兼容说明 #

• 修正原代码中灰色轨道未设置width:100%的问题：轨道宽度完全铺满所在的半区，不再依赖文本对齐方式撑宽，避免DomPDF中轨道宽度计算偏差
• 消除inline-block默认缝隙：外层容器设置font-size:0，内层文字块恢复字号，避免左右分栏之间出现无意义空隙，导致0刻度线错位
• 填充条定位逻辑：负值块用float:right自动贴靠到左半区轨道的最右侧，也就是两个分栏拼接的0刻度位置，填充宽度越大，条带越向左延伸，完全符合从右往左填充的效果
• 规避DomPDF渲染问题：不使用flex布局、绝对定位，所有宽度用父容器百分比计算，避免PDF导出时条带错位、文字溢出
• 垂直居中：通过固定轨道高度+统一line-height的方式实现文字居中，不需要依赖DomPDF支持度不稳定的flex垂直居中属性

注意：如果需要在0刻度位置添加分隔线，只需要在左右分栏相邻处添加1px宽度的深色竖线块即可，不需要额外的定位计算。

内容的提问来源于stack exchange，提问作者Septian Rizky