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

Question

I'm creating a web page to be printed. 我正在创建一个要打印的网页。 It could wrap to 2 pages. 它可以包装到2页。 There has to be a small, black square in each corner for a scanner to use for reference. 每个角落都必须有一个小的黑色方块，供扫描仪用作参考。 I'm pretty sure I just need divs for the 4 black squares in the corners and one more div for main content area. 我很确定我只需要角落中的4个黑色方块和主要内容区域的另外一个div。 How do I position the 4 corner squares so that each of them is in its own corner of the printed page with the content div filling the center? 如何定位4个角正方形，使每个角正方形位于打印页面的自身角落，内容div填充中心？ The center content should be inside the corner squares left to right, but could overlap with them top to bottom. 中心内容应该从左到右的角落内部，但可以从上到下重叠。

EDIT: I uploaded a sample image, but it's not showing. 编辑：我上传了一个示例图片，但它没有显示。

EDIT: Here's what I have so far: 编辑：这是我到目前为止：

http://jsfiddle.net/7DjTf/ 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;
}

I'm not sure how to get the lower right block to go over to the right. 我不确定如何让右下方的区块向右移动。 Float would work, but using "absolute" seemed to break that. Float会起作用，但使用“绝对”似乎打破了这一点。 Note: your browser window needs to be pretty wide for this sample to look any good. 注意：您的浏览器窗口需要相当宽，以使此示例看起来不错。 Also, I'm not sure how to make those black squares appear on every page no matter if there is only one page or if there is a second page printed. 另外，我不知道如果只有一页或者打印了第二页，如何在每页上显示黑色方块。

以下是页面外观的示例

Answer 1

its actually pretty easy. 它实际上很容易。 I've updated your fiddle - http://jsfiddle.net/avrahamcool/7DjTf/1/ 我已经更新了你的小提琴 - http://jsfiddle.net/avrahamcool/7DjTf/1/

you have to use the right attribute correctly. 你必须正确使用right属性。

I would recommend using the same technique for all indicators. 我建议对所有指标使用相同的技术。 so use position: absolute; 所以使用position: absolute; with all of them, and set the top / bottom left / right accordingly also, no need for repeating the style. 与所有的人，并设置top / bottom left / right因此也没有必要重复的样式。 use class instead. 改用类。 like this: http://jsfiddle.net/avrahamcool/7DjTf/2/ 像这样： http ： //jsfiddle.net/avrahamcool/7DjTf/2/

Update: apparently , the @page CSS3 pseudo elements rules are not implemented yet in the browsers, so we'll have to fall back to JavaScript. 更新： 显然，在浏览器中尚未实现@page CSS3伪元素规则，因此我们将不得不回归JavaScript。 (if it was, you'll have a perfect solution like this article explains) （如果是的话，你将有一个像这篇文章解释的完美解决方案）

first: because background-color is not printed, I switched to img tag. 第一：因为没有打印background-color ，我切换到img标签。 second: the first solution had only 4 indicators (2 at the beginning & 2 at the end), and you want 4 indicator for each printed page. 第二：第一个解决方案只有4个指标（开头2个，结尾2个），每个打印页面需要4个指标。

so here is a new solution: http://jsfiddle.net/avrahamcool/7DjTf/5/ 所以这是一个新的解决方案： http ： //jsfiddle.net/avrahamcool/7DjTf/5/

the idea is to add dynamic indicators as the content grows. 我们的想法是随着内容的增长添加动态指标。 the indicators should be visible only when printing. 指示应仅在打印时可见。 the part that visualize the indicator is the .indicator rule and he's located in @print rule. 可视化指标的部分是.indicator规则，他位于@print规则中。

so far, I didn't manage to write a code that 'knows' how many pages will be printed.. so the for loop run a constant number of times (and I don't know how to solve this part) 到目前为止，我没有设法编写一个“知道”将打印多少页面的代码..所以for循环运行一定次数（我不知道如何解决这个部分）

inside the loop: I add 4 dynamic indicators (2 in the left and 2 in the right) each time, the offset should grow in such way that the next indicators would be in the next page.. 循环内部：我每次添加4个动态指标（左边2个，右边2个），偏移量应该增加，下一个指标将在下一页中。

If you know how many pages you're gonna have, its a perfect solution for you. 如果你知道你将拥有多少页，它将是一个完美的解决方案。

Notice: this offset between pages is different when printing from different browsers. 注意：从不同的浏览器打印时，页面之间的偏移量是不同的。 I've tested my solution in Chrome. 我在Chrome中测试了我的解决方案。 (IE & FF requires a little tuning); （IE＆FF需要一点调整）;

Answer 2

if you want right bottom icon to set in right you can use this 如果你想在右边设置右下角图标，你可以使用它

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

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-09-09 18:17:12

解决方案2
0 2013-09-09 18:20:37

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-09-09 18:17:12

解决方案2 0 2013-09-09 18:20:37

解决方案1
2 已采纳 2013-09-09 18:17:12

解决方案2
0 2013-09-09 18:20:37