我正在使用gridbyexample.com定义的新CSS3布局技术.除非我尝试打印布局,否则它的效果非常好.Chrome和Firefox似乎忽略了我在CSS中定义的任何分页符和横向视图模式.我的项目有一个代码笔,但它似乎改变了它在打印预览模式下的外观,因此它只适用于查看HTML和CSS,但不适用于打印的外观. https://codepen.io/JeffreySpring/pen/rzjeKm
我创建了一个.zip文件,其中包含可从https://drive.google.com/open?id=0B0LdH-fKpAKeY0NRa290M25uTGc下载的所有文件和图像
这是HTML
<!DOCTYPE html>
<html>
<head>
<title>Steam Controller Bindings Template</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body cz-shortcut-listen="true" style="">
<ul class="wrapper">
<li class="device">
<div id="steamDeviceContainer">
<div><h1>Couch Gamer's Witcher 3 Bindings</h1></div>
<img src="img/steam_controller.png" alt="Steam Controller">
</div>
<div class="mappingGyroShift1">
<h3 class="mappingHeader gyroShift1">Gyro<span class="boundTo gyroShift1">(Mouse Joystick)</span></h3>
<div class="actionBind gyroShift1">Precision Crossbow/Bomb Aim</div>
</div>
</li>
<li>
<div class="mapping">
<h3 class="mappingHeader">Left Trigger</h3>
<div class="actionBind">Use Witcher Senses</div>
<div class="actionBind">Block or Counterattack</div>
</div>
<div class="mapping">
<h3 class="mappingHeader">Left Bumper</h3>
<div class="actionBind">Quick choice menu</div>
</div>
<div class="mapping"> …