흐름에서 "div"위치를 변경하는 방법은 무엇입니까?

Question

플로트 위치와 (왼쪽 및 오른쪽) 두 개의 열이 있습니다 : 나는 http://jsfiddle.net/GBa4r/1/ (".left"열 "됐지"위의 예에서와 같이 열 장소를 변경해야 인쇄 스타일에 대한 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> 

가)

내가 변경 html 코드없이 그것을 할

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

에 사용해야 어떤 CSS 코드?

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

특정 인쇄 스타일 시트를 사용하여 인쇄 특정 스타일 시트를 사용합니다. 당신은 link 요소에 media 속성으로 작업을 수행 할 수 있습니다

<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 인쇄 스타일이며, 미디어 =는 "인쇄"명령은이 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; 

추가.