CSS嵌套Div打印问题：第二页顶部的文本束

时间：2010-07-13 21:14:23

标签： asp.net css

这是我目前正在使用的HTML和内联CSS：

<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0;
    background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0;">
        <span style="font-style: italic; font-size: 13px; padding-left: 80px;">Test Group 1</span></div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; font-weight: bold; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
    </div>
<div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
    margin: 0; font-style: italic; font-weight: bold; border-bottom: 3px double;">
    <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
        display: block; position: absolute;">
        $0.00</div>
    <div style="font-size: 13px; text-align: right; width: 70px; display: block;
        position: absolute;">
        $0.00</div>
</div>
<div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
    margin: 0; font-weight: bold; font-style: italic; border-bottom: 3px double;">
    <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
        display: block; position: absolute;">
        $0.00</div>
    <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
        display: block; position: absolute;">
        $0.00</div>
    <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
        display: block; position: absolute;">
        $0.00</div>
</div>
</div><div style="width: 975px; clear: both; float: left; text-align: left; display: block;
    margin: 0; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
</div>
<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
        <span style="font-size: 13px; padding-left: 130px;">L GROUP</span></div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
    </div>
</div>
<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px;
            display: block; position: absolute;">
            <span id="lnkInvoice17">828</span></div>
        <div style="font-size: 13px; padding-left: 264px; text-align: right; width: 35px;
            display: block; position: absolute;">
            5.00000%</div>
        <div style="font-size: 13px; text-align: left; padding-left: 197px; width: 60px;
            display: block; position: absolute;">
            7/14/2010</div>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00**</div>
    </div>
</div>
<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px;
            display: block; position: absolute;">
            <span id="lnkInvoice18">828</span></div>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $165,165.12</div>
    </div>
</div>
<div style="width: 975px; clear: both; float: left; text-align: left; display: block;
    margin: 0; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
</div>

这段代码基本上是一堆嵌套的DIVS，用作可扩展/可折叠的div结构。为了打印出来，我删除了所有功能。然而，问题是页面完全显示在打印预览中......直到它需要分页到下一页。第二页的其他文本都在页面顶部显示：

alt text http://i29.tinypic.com/wsphyt.jpg

任何人都知道发生了什么事吗？我假设它是FLOAT或INLINE / BLOCK问题，但我似乎无法弄明白哪个。

1 个答案:

答案 0 :(得分：0)

尝试使用此HTML 

<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0;
    background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0;">
        <span style="font-style: italic; font-size: 13px; padding-left: 80px;">Test Group 1</span>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; font-weight: bold; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; font-style: italic; font-weight: bold; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; font-weight: bold; font-style: italic; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; display: block;
    margin: 0; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
        <span style="font-size: 13px; padding-left: 130px;">L GROUP</span></div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px;
            display: block; position: absolute;">
            <span id="lnkInvoice17">828</span>
        </div>
        <div style="font-size: 13px; padding-left: 264px; text-align: right; width: 35px;
            display: block; position: absolute;">
            5.00000%
        </div>
        <div style="font-size: 13px; text-align: left; padding-left: 197px; width: 60px;
            display: block; position: absolute;">
            7/14/2010
        </div>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block; border-bottom: 1px solid;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00**
        </div>
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0;
    display: block; background-color: #D3D3D3;">
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px;
            display: block; position: absolute;">
            <span id="lnkInvoice18">828</span>
        </div>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
        <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $165,165.12
        </div>
    </div>
</div>
<div class="clearfix" style="width: 975px; float: left; text-align: left; display: block;
    margin: 0; background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;">
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; display: block;">
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right;
        margin: 0; display: block;">
    </div>
</div>

添加此CSS 

<script type="text/css">
 .clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  }

.clearfix {
   display: inline-block;
 }

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

</script>
相关问题
最新问题