asp.net - CSS 嵌套 Div 打印问题 : Text bunches at top of second page-6ren

asp.net - CSS 嵌套 Div 打印问题 : Text bunches at top of second page

转载作者：行者123 更新时间：2023-11-28 14:57:40

这是我目前使用的 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 结构。为了打印出来，我删除了所有功能。然而，问题是该页面在打印预览中显示完美......直到它需要分页到下一页。第二页的其余文本都在页面顶部乱七八糟:

有人知道发生了什么事吗？我假设这是一个 FLOAT 或 INLINE/BLOCK 问题，但我似乎无法弄清楚是哪个。

最佳答案

尝试使用这个 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>

关于asp.net - CSS 嵌套 Div 打印问题 : Text bunches at top of second page，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3241578/

文章推荐： ios - 如何检查 UIPageViewController VC 何时更改为另一个？

文章推荐： html - 如何正确达到高度 100%

文章推荐： javascript - 在 Bootstrap 框架中包含 jQuery 或 JavaScript

python - 如何从sklearn获取目标特征名称 `Bunch`
可以从 sklearn 获取“列标题”Bunch如Bunch.feature_names 。但是，这不会给出目标变量的“列标题”。如何获取目标变量的“列标题”？例如对于 Iris 数据集: >>>
python - 从字符串中读取 Bunch()
我在报告文件中有以下字符串: "Bunch(conditions=['s1', 's2', 's3', 's4', 's5', 's6'], durations=[[30.0], [30.0], [3
python - 在 Bunch 类型对象中设置和获取属性
为了解析/创建 JSON 的简单性，机器学习应用程序通常使用 Bunch对象，例如https://github.com/dsc/bunch/blob/master/bunch/__init__.py
python - Click支持 "bunching"做空期权吗？
某些命令行工具允许“组合”短选项。例如，tar 命令采用短选项 -x、-v 和 -f filespec。它允许选项像 -xvf filespec 一样组合在一起，以避免空格破折号的冗余输入。阅读
python - 我应该如何理解python中的 "Bunch class"？
今天学习了《Python算法》这本书上的一个Bunch类 class Bunch(dict): def __init__(self, *args, **kwds): super
MySQL 工作台 : Generate a bunch of rows?
我有一个用于生成模式的 MySQL 工作台模型。为了玩弄它，我想要一堆假数据。有没有一种简单的方法来生成它，还是我必须手动完成？最佳答案这是我经常用来生成虚拟数据的网站。 http://www.g
android - 内存不足异常 : Load Bunch Of Images From Server
我正在开发一个从服务器 API 下载图像的应用程序... 我们已经创建了一个 API，它提供图像 URL 的 JSON 响应... 我已经创建了用于显示图像的 GridView，它正在成功运行....
Java风格: Catching a bunch of slightly different errors
在我正在使用 Java 编写的程序中，我必须从文件中读取数据。数据经过格式化，以便每一行都包含构造新对象所需的所有信息。当我解析数据时，我有一个看起来像这样的代码块: String[] parts =
c++ - 模板元编程 : multiplying a bunch of template arguments
我需要在编译时计算传递给模板化结构的一堆数字的乘积。我成功地做了一个丑陋的解决方案: template struct mul_all { static constexpr std::size_
php - 哪个更快 : in_array() or a bunch of expressions in PHP?
执行以下操作是否更快: if ($var != 'test1' && $var != 'test2' && $var != 'test3' && $var != 'test4') { ... } 或
elm - XY 概率 : How do I issue a bunch of msgs simultaneously?
几乎肯定是 XY problem但我想不出一种简洁的方式来表达我想做的事情。我有一个文本区域。在此文本区域内，用户输入以逗号分隔的 ID 号列表。当他们单击“获取”时，我用逗号分隔他们的输入，以获取
javascript - js : trigger function after a bunch of events were called
我需要在几个事件结束时调用一个函数。假设我有 9 个点击监听器、10 个蓝色监听器、一些按键上/下监听器等。解决方案是修改所有内容并添加函数调用。但这……呃……蹩脚。我是否可以一次性添加对所有事
javascript - 我正在尝试应用过滤器 :brightness in JavaScript to a bunch of image elements
var brightness = document.getElementById("brightness"); trash.addEventListener("click", function() {
css - 防止定位到:fixed; div from bunching when window is resized的内容
希望这不是转载!我到处都看过，如果是的话，我很抱歉。我有一个 position:fixed 标题 div，它有一些图像链接和一个登录 div。由于 position:fixed 是相对于窗口的，每当
linux - 我如何找到 : find a string in a bunch of files, 然后将文件复制过来
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
jquery - Django、ajax : how to live update a bunch of data effectively
我正在创建一个模拟证券交易所市场的项目。我在一个大的 html 上向用户公开股票数据其中每个行有两个细胞。其中之一是公司的标志(即 AAPL)，另一个是当前的市值(再简单不过了)。我现在所做的
python - GAE 网络应用程序 : the cost of importing a bunch of request handlers
我的 python GAE 应用程序的中央应用程序文件如下所示: import webapp2 import homepage import user_auth import user_confirm
linux - shell 脚本 : Get a SSH banner from bunch of systems
我正在尝试从一堆系统中获取 SSH 横幅。不幸的是，我需要输入密码才能让脚本进入下一个系统。 user@pc:~$ for i in {1..10}; do ssh 192.168.0.$i; don
java - spring mvc 3.0 : put a bunch of . spring控制下的jsp文件
在我的 spring mvc 3.0 项目中，我有一个充满 .jsp 文件(~150)的目录，我想将其置于 spring 的控制之下。到目前为止，它们都是由 web.xml 直接调用，而不通过 sp
How can I make a bunch of horizontal divs responsive to the screen?(我怎么才能做出一堆水平的div来响应屏幕呢？)
我正在屏幕上显示一些框。这些是指两种大小的容器。。在移动屏幕上，当屏幕水平宽度太小时，我希望框的大小减小-保持相同的纵横比。我如何才能做到这一点？我不太了解如何使用Flexbox来做到这一点。。。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

asp.net - CSS 嵌套 Div 打印问题 : Text bunches at top of second page