Question

我正在使用mpdf库开发报告html。我的代码是：

..
<td style="width:400px">
<span style="float:left; width:60px;">Rp</span>
<span style="float:right; width:340px;">100</span>
</td>
..

我希望它在左侧显示为“Rp”，在右侧显示为“100”，在浏览器中它显示了我想要的完美结果，但是当生成为pdf时，它们都在左侧。并且跨度的宽度不正确。为什么这不起作用？

有人帮助我，谢谢你。

Answer 1

尝试使用“percent”而不是“px”：

<强> HTML：

<table>
    <tr>
        <td>
            <span>Rp</span>
            <span>100</span>
        </td>
        <td>
            second TD
        </td>
    </tr>
</table>

<强> CSS：

table{
    width: 100%;
    border: 1px solid red;
}

td {
    width: 400px;
}

td span{
    float: left;
    border: 1px solid green;
    width: 20%;
    margin-right: 10px;
}

td span:nth-child(2){
    border: 1px solid blue;
    width: 60%;
}

演示：http://jsfiddle.net/R5KW6/1/

Answer 2

span根据内容占用空间。你可以使用div而不是span，但你需要在td（表结构）外面使用div，因为div宽度在表内不起作用。

以下是示例。

＆＃13;

<div style='float:left; width:350px;'>Rp</div>
 <div style='float:width:200px;'>100</div>

＆＃13;

Answer 3

将float替换为margin-left

<td style="width:400px">
<span style="width:60px;">Rp</span>
<span style="margin-left:60px;width:340px;">100</span>
</td>

mpdf上的span width和float不起作用

3 个答案: