1

フロート配置の 2 つの列 (左右) があります: 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コードを変更せずにそれを行うには？

4

5 に答える 5

2

CSS @media クエリを使用する

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

または、次を使用して印刷固有のスタイルシートを使用しますmedia="print"

<link type="text/css" rel="stylesheet" media="print" href="print_specific_sheet.css" />
于 2012-12-07T08:41:08.113 に答える
2

特定の印刷スタイルシートを使用します。要素のmedia属性でそれを行うことができます：link

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

または、CSS ファイル内から行うこともできます。

@media print {
    /* print specific styles */
}
于 2012-12-07T08:42:33.277 に答える
0

印刷スタイルシートは、ページが印刷されるときにのみ呼び出されることを除いて、通常のスタイルシートとほとんど同じように機能します。これを機能させるには、すべての Web ページの上部に以下を挿入する必要があります。

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

ファイル print.css は印刷スタイルシートであり、media="print" コマンドは、この CSS ファイルが Web ページの印刷時にのみ呼び出されることを意味します。

于 2012-12-07T08:44:30.720 に答える
0

次の CSS を使用します。

.container {width:200px;}
.right {background-color: #eaeaea; width: 30%;position: absolute;
top: 18px;}
.left {background-color: #ccc; width: 70%; position: absolute;
top: 0%;}​
于 2012-12-07T08:53:18.523 に答える
0

次のフィドルをチェックしてください: 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;

親に。

于 2013-02-28T11:21:01.717 に答える