Question

我正在创建一个要打印的网页。它可以包装到2页。每个角落都必须有一个小的黑色方块，供扫描仪用作参考。我很确定我只需要角落中的4个黑色方块和主要内容区域的另外一个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;
}

我不确定如何让右下方的区块向右移动。 Float会起作用，但使用“绝对”似乎打破了这一点。注意：您的浏览器窗口需要相当宽，以使此示例看起来不错。另外，我不知道如果只有一页或者打印了第二页，如何在每页上都出现黑色方块。

Here's a sample of how the page should look

Answer 1

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

您必须正确使用right属性。

我建议对所有指标使用相同的技术。所以对所有这些内容使用position: absolute;，并相应地设置top / bottom left / right 而且，不需要重复这种风格。改用类。像这样：http://jsfiddle.net/avrahamcool/7DjTf/2/

<强>更新 apparently，@ page CSS3伪元素规则尚未在浏览器中实现，因此我们将不得不回归JavaScript。（如果是的话，你将有一个完美的解决方案，如this文章解释）

首先：因为没有打印background-color，我切换到了img标签。第二：第一个解决方案只有4个指标（开头2个，结尾2个），每个打印页面需要4个指标。

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

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

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

循环内部：我每次添加4个动态指标（左边2个，右边2个），偏移量应该增加，下一个指标将在下一页中。

如果您知道自己将拥有多少页面，那么它就是您的理想选择。

<强>注意：从不同的浏览器打印时，页面之间的偏移量是不同的。我在Chrome中测试了我的解决方案。（IE＆amp; FF需要一点调整）;

Answer 2

如果您想在右侧设置右下方图标，则可以使用此

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

使用HTML和CSS的基本打印页面布局

2 个答案: