0

下图解释了我想要实现的目标。

在此处输入图像描述

我需要显示用户的汽车图片，并在其下显示名称。每个图像/名称对都应该在一个 DIV 中，以便用户添加更多汽车时，它们会移动到下一行或下一页。理想情况下，DIV 应该居中，更多地是出于美学考虑。

使用DOMPDF，我从 HTML 布局生成 PDF。

不幸的是，DOMPDF 对浮点的支持很差，即使在新的 0.6.2 测试版中也是如此。我想知道我提议的这种布局是否可以在没有浮动的情况下完成。DOMPDF 也不支持无序列表。

我尝试了一些使用表格的解决方案，但这也不好，因为 DOMPDF 不允许单元格溢出到下一页。

我正在使用 PHP 5/codeigniter 和 DOMPDF 0.5.2（稳定）。

非常感谢任何有关如何获得此布局的建议！

这是代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">

        img {width: 150px; height: 150px;}

        h1 {font-size: 3em; text-align: center;}

        h2 {text-transform: uppercase; width: 150px; text-align: center;}

        div {margin: 10px; width: 150px;}

    </style>
</head>


    <h1>My Cars</h1>

        <?php foreach ($cars as $row): ?>

            <div>

                <img src="<?php echo $row->cars_picture; ?>" />

                <h2><?php echo $row->cars_name; ?></h2>

            </div>

        <?php endforeach; ?>

</html>
4

3 回答 3

1

感谢 @rkw 和 @manyxcxi 提供帮助。最后，在没有 hack 的情况下这样做的唯一方法是使用mpdf而不是 DOMPDF。

我的印象是 mpdf 是一个更好的库，具有更好的文档。它对 有部分支持float，但它工作得非常好，并且完全符合我上面的需要。

于 2011-07-21T01:59:57.553 回答
0

如果这些框都是固定宽度并且您知道 PDF 的宽度，那么您可以计算每行的框并使用底行左侧的分隔符 div 来为您提供所需的偏移量。

于 2011-07-20T04:28:22.457 回答
0

如果不使用浮点数，则必须使用而不是：http: //jsfiddle.net/AxZam/40/

相关的CSS：

body {
   width:800px; 
}
#content {
    margin: 0px auto;
    width: 600px;
    text-align: center;
}
img {
    width: 150px;
    height: 150px;
}
h1 {
    font-size: 3em;
}
.cars {
    text-transform: uppercase; 
    width:150px; 
    display:block; 
    position:absolute; 
    top:0px; left:0px; }
span {
    margin: 10px; 
    position: relative;
}

相关的html部分：

<div id='content'>
    <h1>My Cars</h1>
    <span>
        <img />
        <span class='cars'>car</span>
    </span>
    ...
</div>
于 2011-07-20T04:53:07.870 回答