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;

到父母。

如何在流程中改变“div”的位置？

5 个答案: