1

以下の HTML/CSS は最近のブラウザーでは機能しますが、CF9 の cfdocument では機能しません。アイデアのある人はいますか？可能であれば、cfdocument で inline-block プロパティを使用したいと考えています。あるいは、同様の結果をレンダリングする別の方法がありますか?

私は何を知っていますか？
CF の cfdocument がサポートする CSS プロパティのセットが限られていることは認識しています (CSS1/CSS2)。CF のドキュメントには、「display」CSS プロパティをサポートしていると書かれています。ただし、サポートされている値は識別されません。期待される出力といくつかのサンプル コードを含めました。

期待される出力(下の画像を参照)
画像

サンプルコード

<cfdocument format="PDF" pagetype="letter">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Demo: Display Property (block, inline, inline-block)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style="margin: 0; padding: 0">

<style>
.container { margin-left: 2em; width: 35em; border: none; }
div { margin: 1em 0; border: solid 1px red; }
p { margin: 1em 0; border: dotted 2px blue; }
div#one p { display: block; width: 6em; text-align: center; }
div#two p { display: inline; width: 6em; text-align: center; }
div#three p { display: inline-block; width: 6em; text-align: center; }
</style>

<div class="container">
    <div id="one">
        <strong>TEST 1: block</strong>  This text is within block-level level element (DIV).   
        <p>Here's a block-level paragraph (P).</p>  
        Here's some additional text still inside a block-level elment.
    </div>
    <div id="two">
        <strong>TEST 2: inline</strong>  This text is within block-level level element (DIV).  
        <p>Here's an inline paragraph (P).</p>  
        Here's some additional text still inside a block-level element.
    </div>
    <div id="three">
        <strong>TEST 3: inline-block</strong> This text is within block-level level element (DIV).  
        <p>Here's an inline-block paragraph (P).</p>    
        Here's some additional text still inside a block-level element.
    </div>
</div>

</body>
</html>
</cfdocument>
4

1 に答える 1

0

代わりに float を試すことができます display : follow link 

.container { margin-left: 2em; width: 35em; border: none; }
div { margin: 1em 0; border: solid 1px red; }
p { margin: 1em 0; border: dotted 2px blue; }
div#one p { float: right; width: 6em; text-align: center; }
div#two p { float: right; width: 6em; text-align: center; }
div#three p { float:right; width: 6em; text-align: center; }
.clear {clear:both; border:0px}
于 2013-08-16T06:10:22.077 に答える