如何通过 HTML/CSS 布局这些元素以避免 DOMPDF 缺乏浮动？
下图解释了我想要实现的目标。
我需要显示用户的汽车图片及其下方的名称。每个图像/名称对都应位于 DIV 中，以便当用户添加更多汽车时，它们会移动到下一行或下一页。理想情况下，DIV 应该居中，这更多是出于美观的考虑。
使用 DOMPDF，我从 HTML 布局生成 PDF。
不幸的是，即使在新的 0.6.2 beta 中，DOMPDF 对 float 的支持也很糟糕。我想知道我提议的这种布局是否可以在没有浮动的情况下完成。 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>
The image below explains what I am trying to achieve.
I need to show a user's car picture with the name under it. Each image/name pair should be in a DIV so as a user adds more cars, they move to the next line or page. Ideally the DIVs should be centered, more as a matter of aesthetics.
Using DOMPDF, I am generating a PDF from an HTML layout.
Unfortunately, DOMPDF's support for float is bad, even in the new 0.6.2 beta. I wonder if this layout I am proposing could be done without float. DOMPDF also does not support unordered lists.
I have tried some solutions using tables, but this also isn't good since DOMPDF does not allow cells to spill over to the next page.
I am using PHP 5/ codeigniter, and DOMPDF 0.5.2 (stable).
Any suggestions on how to get this layout are greatly appreciated!
Here is the code:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
感谢@rkw 和@manyxcxi 的帮助。
最后，无需黑客就能做到这一点的唯一方法是使用 mpdf 而不是DOMPDF。
我的印象是 mpdf 是一个更好的库，有更好的文档。它对
float有部分支持，但它工作得非常好并且完全满足我上面的需要。Thanks to @rkw and @manyxcxi for helping out.
At the end the only way of doing this without hacks was to use mpdf instead of DOMPDF.
I have the impression mpdf is a much better library, with better documentation. It has partial support for
float, but it works very nicely and does exactly what I needed above.如果这些框都是固定宽度并且您知道 PDF 的宽度，那么您可以计算每行的框并使用底行左侧的间隔 div 来为您提供所需的偏移量。
If the boxes are all fixed width and you know the width of your PDF, then you can calculate the boxes per row and use a spacer div on the left of the bottom row to give you the offset you're looking for.
如果不使用 float，则必须使用： http://jsfiddle.net/AxZam/40/
相关css：
相关html部分：
Without using float, you would have to use instead of : http://jsfiddle.net/AxZam/40/
relevant css:
relevant html section: