css - 在 cfdocument 中使用显示内联 block CSS

标签 css coldfusion pdf-generation coldfusion-9 cfdocument

下面的 HTML/CSS 在最近的浏览器中有效,但在 CF9 的 cfdocument 中无效。有想法的人吗? 如果可以的话,我想在 cfdocument 中使用 inline-block 属性。或者也许有其他方法可以呈现类似的结果?

我知道什么?
我知道 CF 的 cfdocument 支持一组有限的 CSS 属性 (CSS1/CSS2)。 CF 文档说它支持 "display" CSS property 。但是,它没有确定支持哪些值。我已经包含了预期输出和一些示例代码。

预期输出(见下图)
IMG

示例代码

<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>

最佳答案

您可以尝试使用 float 代替显示: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}

关于css - 在 cfdocument 中使用显示内联 block CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18265781/

相关文章:

javascript - 开源交互式颜色主题选择器

sql - 为什么这个 SELECT 语句没有 FROM?

java - iText 5 页眉和页脚

ios - 在 iOS 上修改 PDF 交互式表单字段的最佳方法是什么?

javascript - JQuery 父子选择

css - VUEJS : Is it possible to process/modify data retrieved through v-for before displaying?

html - 为什么 div 的子元素会改变 body 和 html 之间的边距?

coldfusion - 使用 CF8 cfimage 标签生成缩略图 - 图像元数据导致文件过大

javascript - ColdFusion/Javascript 动态表单

itext - 在 iText 7 中编写文档时如何获得垂直光标位置?