Проблема с вложенной печатью CSS: текстовые связки вверху второй страницы - PullRequest
Новая
       2

Проблема с вложенной печатью CSS: текстовые связки вверху второй страницы

0 голосов
/ 14 июля 2010

Вот 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. Я удалил всю функциональность с целью распечатать это. Проблема, однако, заключается в том, что страница отображается в режиме предварительного просмотра идеально ... до тех пор, пока ей не понадобится перерыв на следующую страницу. На второй странице остальная часть текста выделена в верхней части страницы:

альтернативный текст http://i29.tinypic.com/wsphyt.jpg

Кто-нибудь знает, что происходит? Я предполагаю, что это проблема FLOAT или INLINE / BLOCK, но я не могу понять, какая именно.

1 Ответ

0 голосов
/ 14 июля 2010

попробуйте использовать этот 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...