How to layout these elements via HTML/CSS circumventing DOMPDF's lack of float?
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 开发者_Python百科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>
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.
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.
Without using float, you would have to use instead of : http://jsfiddle.net/AxZam/40/
relevant 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;
}
relevant html section:
<div id='content'>
<h1>My Cars</h1>
<span>
<img />
<span class='cars'>car</span>
</span>
...
</div>
加载中,请稍侯......
精彩评论