3

我正在创建一个要打印的网页。它可以换成 2 页。每个角落必须有一个黑色的小方块供扫描仪参考。我很确定我只需要角落的 4 个黑色方块的 div 和主要内容区域的另外一个 div。如何定位 4 个角方块，使它们中的每一个都位于打印页面的自己的角落，内容 div 填充中心？中心内容应该在从左到右的角方块内，但可以从上到下与它们重叠。

编辑：我上传了一个示例图片，但它没有显示。

编辑：这是我到目前为止所拥有的：

http://jsfiddle.net/7DjTf/

<html>
    <head>
        <title>Printable Form</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div id="UpperLeftScanningIndicator"></div>
        <div id="UpperRightScanningIndicator"></div>
        <div id="Content">Here is some content.<br /><br /><br /><br />Here is some more.</div>
        <div id="LowerLeftScanningIndicator"></div>
        <div id="LowerRightScanningIndicator"></div>
    </body>
</html>

#Content {
    border: solid 1px black;
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

#UpperLeftScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: left;
}

#UpperRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
}

#LowerLeftScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: left;
    position:absolute;
    bottom:20px;
}

#LowerRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
    position:absolute;
    bottom:20px;
    right:500px;
}

我不知道如何让右下块向右移动。浮动会起作用，但使用“绝对”似乎打破了这一点。注意：您的浏览器窗口需要非常宽才能使此示例看起来不错。另外，我不确定如何让这些黑色方块出现在每一页上，无论是只有一页还是打印了第二页。

这是页面外观的示例

4

2 回答 2

2

它实际上很容易。我已经更新了你的小提琴 - http://jsfiddle.net/avrahamcool/7DjTf/1/

您必须right正确使用该属性。

我建议对所有指标使用相同的技术。所以position: absolute;与所有这些一起使用，并相应地设置top// bottom left，right无需重复样式。改用类。像这样：http: //jsfiddle.net/avrahamcool/7DjTf/2/

更新： 显然，@page CSS3 伪元素规则还没有在浏览器中实现，所以我们不得不回退到 JavaScript。（如果是这样，您将拥有本文解释的完美解决方案）

第一：因为background-color不打印，我切换到img标签。第二：第一个解决方案只有 4 个指示符（开头 2 个，结尾处 2 个），并且您希望每个打印页有 4 个指示符。

所以这是一个新的解决方案：http: //jsfiddle.net/avrahamcool/7DjTf/5/

这个想法是随着内容的增长添加动态指标。指示器应仅在打印时可见。可视化指标的部分是.indicator规则，他位于@print 规则中。

到目前为止，我还没有编写一个“知道”将打印多少页的代码。所以for循环运行了恒定的次数（我不知道如何解决这部分）

在循环内部：我每次添加 4 个动态指标（左侧 2 个，右侧 2 个），偏移量应该以这样的方式增长，下一个指标将在下一页中。

如果您知道您将拥有多少页，那么它对您来说是一个完美的解决方案。

注意： 从不同的浏览器打印时，页面之间的偏移量是不同的。我已经在 Chrome 中测试了我的解决方案。（IE & FF 需要一点调优）；

于 2013-09-09T18:17:12.733 回答
0

如果您希望右下角图标设置正确，您可以使用它

#LowerRightScanningIndicator {
    height: 20px;
    width: 20px;
    background-color: black;
    float: right;
    position:absolute;
    bottom:20px;
    right:20px;
}
于 2013-09-09T18:20:37.013 回答