순전히 CSS를 사용하여 div 요소 재정렬

Question

내 사이트의 기본 스타일 시트에는 div 요소가 매우 특정한 순서로 배열되어 있습니다. 내 인쇄 스타일 시트에서 순전히 CSS를 사용하여 div 요소의 순서를 재정렬하고 싶습니다. 어떻게해야합니까?

나의 주 스타일 시트이 될 수있는 div 가정 :

ad

be

cf

내가 내 인쇄 스타일 시트에 다음과 같이 할 (I 제거 프린터가 아닌 div) :

d

Answer 1

은 ...

http://jsfiddle.net/ywTJy/2/

div { 
    width: 50%; 
    background-color: #ccc; 
    float: left; 
} 

/* print CSS */ 

div { 
    float: none; 
    width: 100%; 
} 

#b, #e { 
    display: none; 
} 

난 당신이 의도적으로 "F"사업부를 이동하려면 확실하지 않다 두 번째 입장이지만 웹용으로 한 가지 방법으로 콘텐츠를 주문하고 인쇄용으로 다시 주문하는 경우에는 어색한 것으로 보입니다.

Answer 2

c

f

a

당신이 그들을 위치를 "원하는"정확히 방법에 따라 다르며, CSS를 사용하는 방법에는 여러 가지가 있습니다. 대부분의 barebones 기본 방법은 페이지를 둘러싼 div를 움직이면서 position : absolute와 top/left/etc CSS 속성을 적절하게 조정하는 것입니다. 나는 여전히 인쇄와 ​​잘 작동해야한다고 생각합니다.

당신이 웹 페이지를 디자인하기 위해 절대적으로 배치 된 항목에 "전적으로 의존"하지 않기를 바랍니다. 그러나 그것은 하나의 방법입니다.

Answer 3

콘텐츠가 흐르고 동적 인 경우 문제가 발생합니다. 항목이 당신이 좋아하는 일을 할 수 서로의 관계에있을 것입니다 위치를 확실하게 알 수있는 경우 :

<div style="width:100px;position:relative;left:100px"> 
<div style="width:100px;position:relative;left:-100px"> 

이 나란히 된 div의 시각적 인 위치를 바꿀 것이다.

Answer 4

일반적으로 아니오 : position:static 항목 (기본값)을 다른 순서로 흐르게 할 수 없습니다. CSS 변경은 요소의 표현을 변경하지만 내용의 의미와 내용은 모호합니다. 한 문장과 단락이 다른 문장과 논리적으로 뒤 따르는 것처럼 CSS를 사용하여 내용의 의미를 바꿀 수는 없습니다. 당신은 원치 않는 div의 제거와 같은 나머지 된 div를 쌓을 수