CSS和飞碟头

我工作的那家公司使用飞碟已有一段时间了。最近，他们将标题格式更改为如下所示的复杂格式：

                             THE COMPANY NAME
_____________________________________________________________________________
This is the name of the article                          |    Date:04/17/2013
_____________________________________________________________________________

遗憾的是，我不能让它看起来像上面那样。我能让它看起来像是顶行比底行短：

                              THE COMPANY NAME
____________________________________________________________________
This is the name of the article                   |  Date:04/17/2013
_____________________________________________________________________________

代码如下：

   @page {
        size:letter;
        margin-top: 0.8in;
        margin-bottom: 0.5in;
        padding: 5px;
        border-top:#90aac5 solid 1px;
        @top-left {content: element(leftHeader);}
        @top-center{content: element(centerHeader);}
        @top-right {content: element(rightHeader);}
        }

    #page-thisheader-center {
    position:running(centerHeader);
    border-bottom:#90aac5 1px solid;
    font-size:9px;
    height:52px;
    color:#7e7f7f;
    padding:2px;


     }

   #page-header-right {
    position:running(rightHeader);
    border-top:#90aac5 1px solid;
    height: 25px;
    font-size:9px;
    color:#7e7f7f;
    white-space:nowrap;
    float:right;
    padding-top:5px;

     }

    #page-header-left {
    position:running(leftHeader);
    border-top:#90aac5 1px solid;
    height: 25px;
    font-size:9px;
    color:#7e7f7f;
    float:left;
    padding-top:5px;


     }
    .date {
     height: 15px;
     border-left: #90aac5 solid 1px;
     float:right;
     width:75px;

对于上面的ID和类，标记如下所示：

      <div id ="page-header-left" align="left">
       <div> <xsl:call-template name="get.title"/></div>
      </div>

     <div id ="page-header-right" align="right">
       <div class="date"> <xsl:call-template name="get.date"/></div>
      </div>

    <div id ="page-thisheader-center">
       <div> <xsl:call-template name="get.company.name"/></div>
      </div>

我想就这些了。我希望有人能帮忙。我完全被难倒在如何纠正顶线上。谢谢

更新 短线是由于较长的标题包装。有没有办法将@top left、@top center和@top right边距固定为固定宽度，这样标题就可以换行，而不会导致整个标题根据标题而变小/变大？顺便说一句：我试过空白：nowrap；在@top-left页边距上，但这只会导致整个页眉滑离标题较长的页面右侧

---

我希望这有助于解决问题。提前谢谢

我不知道是否可以使用

@top left

、

@top center

和

@top right

来做你想做的事。当我尝试您的示例代码时，我得到如下结果：

                               THE COMPANY NAME
____________________________________________________________________

_____                                               ____                    
title                                               date

一个解决方案是使用一个

@top-center

标题，包含标题的三个部分

@top-center组件将覆盖页面的整个宽度，您可以对页面进行布局 里面有三个div

例如：

@page {
    size: letter;
    margin-top: 0.8in;
    margin-bottom: 0.5in;
    @top-center {content: element(centerHeader);}
}

#page-thisheader-center {
    position: running(centerHeader);
}

#company {
    border-bottom: #90aac5 1px solid;
    text-align:center;
}
#line2 {
    border-bottom: #90aac5 1px solid;
}
#article{
    float:left;
}
#date {
    border-left: #90aac5 solid 1px;
    margin-left: 6in;
}

以及：

公司名称
物品名称
日期：2013年7月4日

  <div id="page-thisheader-center">
    <div id="company">THE COMPANY NAME</div>
    <div id="line2">
      <div id="article">Name of the article</div>
      <div id="date">Date : 04/07/2013</div>
    </div>
  </div>