CSS를 사용하여 블록 요소의 순서 전환
이 질문에는 이미 답변이 있습니다.
- CSS 만 사용하여 div를 재정렬하려면 어떻게해야합니까? 답변 23 개
단편
내 HTML이 이미 설정되어 있다고 가정 해 봅시다.
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
다음과 같이 보일 것입니다 :
------------
| Block A |
------------
| Block B |
------------
| Block C |
------------
이제 블록 순서를 바꾸고 싶습니다. CSS 만으로 어떻게 할 수 있습니까?
------------
| Block C |
------------
| Block A |
------------
| Block B |
------------
을 사용하는 등 해키 솔루션이 있다는 것을 알고 position:absolute있지만 display:block속성을 효과적으로 사용하지는 않습니다 . 즉, 블록은 크기가 커지면 다른 블록을 아래쪽으로 밉니다.
긴 이야기
사용자가 컴퓨터를 사용하여 웹 페이지를 볼 때 다음 순서로 블록이 표시됩니다.
- 일반 정보
- 이벤트 일정.
- 아이폰 앱 광고
iPhone 앱 광고는 컴퓨터 사용자에게별로 중요하지 않기 때문에 마지막에 배치됩니다. 소수의 컴퓨터 사용자가 휴대 전화를 꺼내 앱을 설치합니다.
모바일 사용자가이 사이트를 방문하면 페이지에서 iPhone 앱 광고가 가장 중요합니다. 따라서 맨 위로 이동해야합니다.
- 아이폰 앱 광고
- 일반 정보
- 이벤트 일정.
iPhone과 컴퓨터 사용자가 동일한 HTML을 공유하고 싶지만 CSS 미디어 쿼리가 블록 순서를 전환하도록합니다.
@media only screen and (max-device-width: 480px) {
#blockC {
/* magic order switching */
}
}
이미 제안한 바와 같이 Flexbox 가 정답입니다. 특히 단일 최신 브라우저 인 Mobile Safari 만 지원 하면되기 때문 입니다.
참조 : http://jsfiddle.net/thirtydot/hLUHL/
원하는 -moz-경우 접두사가 붙은 속성을 제거 할 수 있습니다 . 나는 앞으로 독자들을 위해 방치했습니다.
#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;
} <div id="blockContainer">
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
</div>다음은 div 요소의 순서를 변경하기위한 "가능한 간단한"예제입니다 (브라우저 창의 크기를 조정할 때).
<!DOCTYPE html>
<html>
<head>
<title>foobar</title>
<style>
@media screen and (max-width:300px){
#parent{
display:flex;
flex-flow: column;
}
#a{order:2;}
#c{order:1;}
#b{order:3;}
}
</style>
</head>
<body>
<div id="parent">
<div id="a">one</div>
<div id="b">two</div>
<div id="c">three</div>
</div>
</body>
</html>
예 : http://jsfiddle.net/devnull/qyroxexv/ (div 순서를 변경하는 효과를 보려면 창 너비 변경)
업데이트 : 두 가지 가벼운 CSS 솔루션 :
예 1 : 데모 바이올린
body{
display:flex;
flex-flow: column;
}
#blockA{
order:4;
}
#blockB{
order:3;
}
#blockC{
order:2;
}
또는 Y 스케일을 반대로 바꾸십시오.
예 2 : 데모 피들
body{
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
div{
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
나는 이것이 오래되었다는 것을 알고 있지만 더 쉬운 해결책을 찾았으며 ie10, firefox 및 chrome에서 작동합니다.
<div id="wrapper">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
이것은 CSS입니다.
#wrapper {display:table;}
#one {display:table-footer-group;}
#three {display:table-header-group;}
그리고 결과 :
"Three"
"Two"
"One"
여기 에서 찾았습니다 .
이 방법은 flexbox없이 저에게 효과적이었습니다.
#blockA,
#blockB,
#blockC {
border: 1px solid black;
padding: 20px;
}
.reverseOrder,
#blockA,
#blockB,
#blockC {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}<div class="reverseOrder">
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
</div>HTML :
<div id="blockC second-order">Block C</div>
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC first-order">Block C</div>
CSS
.second-order {
display: none;
}
@media only screen and (max-device-width: 480px) {
.first-order: {
display: none;
}
.second-order: {
display: block;
}
}
I think this is non-stupid solution becouse repeating content is no problem in the most of cases and in your case if it is advertisment you would repeat not a lot of content.
I've answers on this question althought one year passed, becouse I was searching for solution, I read this and got this idea.
<div id="container">
<div id="a">Block A</div>
<div id="b">Block B</div>
<div id="c">Block C</div>
</div>
lets say the height of a block is 100px
#container {position:relative; height: 300px;}
#a, #b, #c {position:absolute; height: 100px}
#c {top: 0px;}
#b {top: 100px;}
#a {top: 200px;}
You could mess with the margins: http://jsfiddle.net/zV2p4/
But you would probably be better off using position: absolute. This does not change display: block, but it will make the width auto. To fix this, make the divs width: 100%
I managed to do it with CSS display: table-*. I haven't tested with more than 3 blocks though.
Possible in CSS3: http://www.w3.org/TR/css3-writing-modes/#writing-mode
Why not change the orders of the tags? Your HTML page isn't made out of stone, are they?
Hows this for low tech...
put the ad at the top and bottom and use media queries to display:none as appropriate.
If the ad wasn't too big, it wouldn't add too much size to the download, you could even customise where the ad sent you for iPhone/pc.
참고URL : https://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css
'IT박스' 카테고리의 다른 글
| Mac OS의 IntelliJ IDEA JDK 구성 (0) | 2020.07.19 |
|---|---|
| 입력 내 패딩은 너비 100 %를 끊습니다. (0) | 2020.07.19 |
| GLib 컴파일 오류 (ffi.h)이지만 libffi가 설치되었습니다. (0) | 2020.07.19 |
| 예외를 발생시키는 람다 식 정의 (0) | 2020.07.18 |
| 해당 속성의 이름에 해당하는 문자열이 주어진 객체 속성에 액세스하는 방법 (0) | 2020.07.18 |