랩 부동 div의 응답보기

2013-08-09 user1452840

-1

가능하고 널리 사용됩니다. 이 모바일 첫 번째 접근 방식을 살펴보십시오.

<div class="container"> 
<div class="right"> Right </div> 
<div class="left"> Left </div> 
</div>

모바일에서 다른 하나의 아래에 하나의 상자로 렌더링됩니다. 이제는 더 큰 화면 (320px 이상)에서 CSS를 사용하여 다시 배열합니다.

출처

2013-08-09 05:19:20 Angelin

영업 이익은 HTML의 순서를 변경하지 않고 싶다. –

모바일 용으로 설계 할 때 올바른 방법입니다. Javascript DOM 조작은 또 다른 접근 방식이지만 모바일에서 성능 문제가 있으므로 사용해서는 안됩니다. – Angelin

OP는 왼쪽이나 오른쪽이 아닌 순서를 변경하려고합니다. –

예. 아래에 예시 된 것처럼 해당 미디어 쿼리에 플렉스 박스 설정을 사용하면 상자가 반전되어 표시됩니다.

<html><head></head><body><div class="container" style=" 
    display: -webkit-flex; 
"> 
    <div class="left" style=" 
    -webkit-flex-flow: column; 
    background: lightgray; 
"> Left </div> 
    <div class="right" style=" 
    -webkit-flex-flow: column; 
    background: yellow; 
    -webkit-order: -1; 
"> Right </div> 
</div> 
</body></html>

원본 소스 : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

출처

2013-08-09 05:20:44

작동하지 않음 :: http://jsfiddle.net/wTFS2/ –

이 페이지의 출처를 확인하십시오. http://www.petercarrero.com/reverse.html (코드는 웹킷 용이지만, 브라우저 솔루션은 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes에서 볼 수 있습니다. –

안녕하세요, jsfiddle 코드가 http://jsfiddle.net/9ndMN/에서 작동합니다. –

랩 부동 div의 응답보기

답변

관련 문제