0

下の画像は、私が達成しようとしていることを説明しています。

ここに画像の説明を入力してください

その下に名前が付いたユーザーの車の写真を表示する必要があります。各画像/名前のペアはDIVに含まれている必要があります。これにより、ユーザーが車を追加すると、次の行またはページに移動します。理想的には、美的問題として、DIVを中央に配置する必要があります。

DOMPDFを使用して、HTMLレイアウトからPDFを生成しています。

残念ながら、新しい0.6.2ベータ版でも、DOMPDFのfloatのサポートは不十分です。私が提案しているこのレイアウトは、フロートなしで実行できるのではないかと思います。DOMPDFは、順序付けされていないリストもサポートしていません。

テーブルを使用していくつかの解決策を試しましたが、DOMPDFではセルが次のページにスピルオーバーすることを許可していないため、これも適切ではありません。

PHP 5 /codeigniterとDOMPDF0.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に感謝します。最後に、ハッキングなしでこれを行う唯一の方法は、DOMPDFの代わりにmpdfを使用することでした。

私は、mpdfがはるかに優れたライブラリであり、より優れたドキュメントを備えているという印象を持っています。の部分的なサポートがfloatありますが、非常にうまく機能し、上記で必要なことを正確に実行します。

于 2011-07-21T01:59:57.553 に答える
0

ボックスがすべて固定幅で、PDFの幅がわかっている場合は、行ごとのボックスを計算し、下の行の左側にあるスペーサーdivを使用して、探しているオフセットを指定できます。

于 2011-07-20T04:28:22.457 に答える
0

floatを使用しない場合は、次の代わりに使用する必要があります：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 に答える