如何在 apache-fo 中使用绝对位置 [英] How to use position absolute in apache-fo

问题描述

我在 apache-fo 中遇到问题，一般来说是 HTML &CSS 如果我们将 position:absolute 赋予一个 div，它将从其父级 Top 和 Left 获取，但是如果我给 Apache FO 中的特定块容器提供 position: absolute 也是一样的，它取自 Page Top &左.

例如:

[我想要这种类型的场景][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>第一块</fo:block></fo:block-容器><fo:block-container width="50%" left="2in" top="3in" position="absolute"><fo:block>第二块</fo:block></fo:block-容器></fo:block-container><fo:block-container><fo:block-container width="50%" left="1in" top="1in" position="absolute"><fo:block>第三块</fo:block></fo:block-容器><fo:block-container width="50%" left="2in" top="2in" position="absolute"><fo:block>第四块</fo:block></fo:block-容器></fo:block-container></fo:block></fo:block-container></fo:flow>

在给定的示例中:我给位置绝对阻止容器和顶部 1in；并留下 1 英寸；而不是从顶部取 1in &从他们的父母那里离开，它从顶部开始需要 1in &从顶部块容器左侧.

我想要像 After First Block、Second Block 这样的输出将在 Top & 1in 之后显示距第一个街区左侧 1 英寸.但现在它显示所有的第一块，第二块，第三块，第四块都在同一位置，并占据顶部和;距顶部块容器 1 英寸.

#main_div, #main_div1, #block1, #block2, #block3, #block4{边框:2px 纯红色；位置:绝对；高度:80px；}

<头></头><身体><div id ="main_div" style="position:relative; width:100%;"><div id="block1" style="top:2px; left:2px; width:100px;">第一块</div><div id="block2" style="top:2px; left:110px;width:100px;">第二块</div>

<div id ="main_div1" style="位置:相对；宽度:100%；"><div id="block3" style="top:2px; left:2px; width:100px;">第三块</div><div id="block4" style="top:2px; left:110px;width:100px;">第四块</div>

</html>

解决方案

此解决方案仅在 fo:block-containers 上为第一和第三个文本块设置高度(应该是一个合理的约束，否则这些块将分别与第二个和第四个重叠):

<fo:block-container width="100%" color="rgb(0, 0, 0)" border="薄纯银"><fo:block-container border="细实黄色"><fo:block-container width="50%" start-indent="1in" margin-top="1in" height="2in" border="thin solid black"><fo:block start-indent=0in">第一块</fo:block></fo:block-container><fo:block-container width="50%" start-indent="2in" border="细实红"><fo:block start-indent="0in">第二块</fo:block>;</fo:block-container></fo:block-container><fo:block-container border="细纯紫色"><fo:block-container width="50%" start-indent="1in" margin-top="1in" height="1in" border="细实绿色"><fo:block start-indent=0in">第三块</fo:block></fo:block-container><fo:block-container width="50%" start-indent="2in" border="thin solid blue"><fo:block start-indent="0in">第四块</fo:block>;</fo:block-container></fo:block-container></fo:block-container></fo:flow>

• fo:block-container没有给定绝对定位
• start-indent 用于代替 left，并且必须在内部 fo:block 中将其设置为 0 以避免出现不需要的继承缩进
• margin-top 和 height 用于代替 top

彩色边框是从托尼格雷厄姆的回答中无耻地复制过来的:它们对于查看不同的尺寸和位置非常有帮助区域.

使用 FOP 1.1、2.0 和 2.1 进行测试(我相当有信心其他格式化程序也会产生相同的输出).

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.

For Example:

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

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.

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>

解决方案

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>

• the fo:block-containers are not given an absolute positioning
• start-indent is used instead of left, and it must be set to 0 in the inner fo:blocks to avoid an unwanted inherited indentation
• margin-top and height are used instead of top

The coloured borders are shamelessly copied from Tony Graham's answer: they are really helpful to see size and position of the different areas.

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