html - 如何更改流程中的“div”位置？

Question

有两列（左右）浮动定位：http: //jsfiddle.net/GBa4r/

<style>
    .container {width:200px;}
    .right {float: right; width: 30%;}
    .left {float: left; width: 70%;}​
</style>
<div class="container">
    <div class="right">2</div>
    <div class="left">1</div>
</div>

​ 对于打印样式，我需要更改列位置，如本示例http://jsfiddle.net/GBa4r/1/（“.right”上方的“.left”列）

我应该使用什么css代码

   <link href="/css/print.css" media="print" type="text/css" rel="stylesheet" />

在不更改 html 代码的情况下做到这一点？

Answer 1

使用 CSS @media 查询

@media print {
  /*Styles goes here*/
}

或使用打印特定样式表media="print"

<link type="text/css" rel="stylesheet" media="print" href="print_specific_sheet.css" />

Answer 2

使用特定的打印样式表。您可以使用元素media上的属性来做到这一点：link

<link rel="stylesheet" media="print" href="print.css">

或者您可以从 CSS 文件内部执行此操作：

@media print {
    /* print specific styles */
}

Answer 3

打印样式表的工作方式与常规样式表大致相同，只是它仅在打印页面时被调用。为了使其工作，需要在每个网页的顶部插入以下内容：

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

文件 print.css 是打印样式表，而 media="print" 命令意味着该 CSS 文件仅在打印网页时才被调用。

Answer 4

使用以下 CSS。

.container {width:200px;}
.right {background-color: #eaeaea; width: 30%;position: absolute;
top: 18px;}
.left {background-color: #ccc; width: 70%; position: absolute;
top: 0%;}​

Answer 5

查看以下小提琴：http: //jsfiddle.net/siyakunde/GBa4r/5/

添加到父容器：

display: -webkit-box; -webkit-box-direction: reverse;

从孩子身上移除：

.right {float: right;}
.left {float: left;}

这是横向变化。

如果要垂直更改定位，如 http://jsfiddle.net/siyakunde/GBa4r/6/

然后加

-webkit-box-orient:vertical;

给父母。