CSS만으로 DIV의 위치 바꾸기
본문
CSS만으로 DIV의 위치를 바꾸려는 경우에 사용할 수 있는 코드입니다.
HTML 코드:
<div id="blockContainer"> <div id="blockA">블록 A</div> <div id="blockB">블록 B</div> <div id="blockC">블록 C</div> </div>
CSS 코드:
#blockContainer { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } #blockA { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; } #blockB { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; box-ordinal-group: 3; /* Source: stackoverflow */
http://jsfiddle.net/hLUHL/723/
두 개 요소의 위치를 바꾸는 경우 다음과 같은 코드도 가능합니다.
.container { display:flex; flex-direction: column-reverse; } .section1, .section2 { height: auto; }간단하게 CSS로 Div의 위치를 바꾸고 싶을 때 사용하면 좋을 듯 합니다. jQuery를 사용하면 더 간단하게 가능합니다(참고).
댓글목록
등록된 댓글이 없습니다.