如何在Apache Fo中使用绝对位置 [英] How to use position absolute in apache-fo
问题描述
我在apache-fo中遇到问题，通常是HTML& CSS，如果我们给div赋予position:absolute，它将取自其父项Top和Left， 但是同样的事情，如果我给出位置:Apache FO中的特定块容器是绝对的，它取自Page Top&左.
I am having problem in apache-fo, In General HTML & CSS if we give position:absolute to a div, it will take from its parent Top and Left, But Same thing if I give position: absolute to a particular block container in Apache FO, it taking from the Page Top & Left.
例如:
<fo:flow flow-name="xsl-region-body">
[I want this type of scenario][1]
<fo:block-container width="100%" color="rgb(0, 0, 0)">
<fo:block>
<fo:block-container>
<fo:block-container width="50%" left="1in" top="1in" position="absolute"><fo:block>First Block</fo:block></fo:block-container>
<fo:block-container width="50%" left="2in" top="3in" position="absolute"><fo:block>Second Block</fo:block></fo:block-container>
</fo:block-container>
<fo:block-container>
<fo:block-container width="50%" left="1in" top="1in" position="absolute"><fo:block>Third Block</fo:block></fo:block-container>
<fo:block-container width="50%" left="2in" top="2in" position="absolute"><fo:block>Fourth Block</fo:block></fo:block-container>
</fo:block-container>
</fo:block>
</fo:block-container>
</fo:flow>
在给定的示例中:我给位置绝对值以阻止容器和前1英寸；并留下1英寸；而不是从顶部和顶部取1英寸从父母那里离开，它从顶部和顶部取了1英寸从最上面的容器向左移.
In Given Example: I am giving postion absolute to block container and top 1in; and left 1in; Instead of taking 1in from top & left from their parent, It taking 1in from top & left from top block Container.
我想要类似第一个块之后"的输出，第二个块将在Top& 1in之后显示.从第一个街区的左侧起1英寸.但是现在，它显示所有第一块，第二块，第三块，第四块都处于同一位置，并且处于顶部和顶部"从顶部块状容器离开1英寸.
I want output like After First Block, Second Block will display after 1in from Top & 1in from Left of First Block. But now it showing all the First Block, Second Block, Third Block, Fourth Block are coming in the Same position, and taking Top & Left 1in from the Top Block Container.
#main_div, #main_div1, #block1, #block2, #block3, #block4{
border:2px solid red;
position:absolute;
height:80px;
}
<html>
<head></head>
<body>
<div id ="main_div" style="position: relative; width:100%;">
<div id="block1" style="top:2px; left:2px; width:100px;">First Block</div>
<div id="block2" style="top:2px; left:110px;width:100px;">Second Block</div>
</div>
<div id ="main_div1" style="position: relative; width:100%;">
<div id="block3" style="top:2px; left:2px; width:100px;">Third Block</div>
<div id="block4" style="top:2px; left:110px;width:100px;">Fourth Block</div>
</div>
</body>
</html>
推荐答案
此解决方案仅在文本的第一和第三块的fo:block-container上设置高度(这应该是一个合理的约束，否则这些块会分别与第二个和第四个重叠):
This solution sets the height only on the fo:block-containers for the first and third blocks of text (which should be a reasonable constraint, as otherwise these blocks would respectively overlap the second and the fourth ones):
<fo:flow flow-name="xsl-region-body">
<fo:block-container width="100%" color="rgb(0, 0, 0)" border="thin solid silver">
<fo:block-container border="thin solid yellow">
<fo:block-container width="50%" start-indent="1in" margin-top="1in" height="2in" border="thin solid black"><fo:block start-indent="0in">First Block</fo:block></fo:block-container>
<fo:block-container width="50%" start-indent="2in" border="thin solid red"><fo:block start-indent="0in">Second Block</fo:block></fo:block-container>
</fo:block-container>
<fo:block-container border="thin solid purple">
<fo:block-container width="50%" start-indent="1in" margin-top="1in" height="1in" border="thin solid green"><fo:block start-indent="0in">Third Block</fo:block></fo:block-container>
<fo:block-container width="50%" start-indent="2in" border="thin solid blue"><fo:block start-indent="0in">Fourth Block</fo:block></fo:block-container>
</fo:block-container>
</fo:block-container>
</fo:flow>
-
fo:block-container的位置不是绝对定位
使用 -
start-indent代替left，并且必须在内部fo:blocks中将其设置为0，以避免不必要的继承缩进
使用 -
margin-top和height代替top - the
fo:block-containers are not given an absolute positioning start-indentis used instead ofleft, and it must be set to 0 in the innerfo:blocks to avoid an unwanted inherited indentationmargin-topandheightare used instead oftop
彩色边框是从 Tony Graham的答案中无耻复制的:它们确实有助于查看不同边框的大小和位置区域.
The coloured borders are shamelessly copied from Tony Graham's answer: they are really helpful to see size and position of the different areas.
经过FOP 1.1、2.0和2.1的测试(我很相信其他格式化程序也会产生相同的输出).
Tested with FOP 1.1, 2.0 and 2.1 (I'm fairly confident the other formatters would produce the same output too).
这篇关于如何在Apache Fo中使用绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
