해상도 변경으로 주문 변경

유동성을 이유로 열과 같이 작동하는 ul이 있습니다. 화면 해상도가 바뀌면 최우선 순위를 매길 수 있나요?해상도 변경으로 주문 변경

편집 : 확인. 플렉스 박스로 작동 시키려고합니다.

.postpreview ul { 
list-style: none; 
display: inline-flex; 

} 

.postpreview ul li { 
flex: 0 100px 30px; 
} 

@media(max-width: 1000px) { 
postpreview ul { 
flex-direction: row-reverse; 
justify-content: flex-end; 
} 
}

이제 해상도가 모바일로 변경되면 오른쪽에 머무르며 실제로 상단에 있어야합니다. 여기 라이브 링크 http://soloveich.com/pr6/blog/

출처

2014-02-07 shell

jquery UI 및 jQuery와 함께 사용할 수 있습니다. –

화면 크기에 따라 주문을 취소 하시겠습니까? –

플렉스 박스로 사용 가능. – bjb568

CSS 전용 용액 :

ul { 
    display: flex; 
} 
li { 
    flex: 0 0 30px; 
} 
@media(max-width: 1000px) { 
    ul { 
    flex-direction: row-reverse; 
    justify-content: flex-end; 
    } 
}

Live example 화면 폭 임계 1000px이다.

업데이트 : 레이아웃을 가로에서 세로로 변경해야하는 경우 미디어 쿼리에 flex-direction: column을 사용하십시오. 당신이 원할 때 무엇을 원하는지에 대한 예가 있으면 도움이 될 것입니다.

출처

2014-02-07 07:22:42

더 잘 보였습니다. 플렉스 박스는 멋져 보입니다! html을 약간 다시해야합니다. 특정 일이 생길 때마다 새로운 질문을 열어 놓을 것입니다. 그 방향을 가리켜 주셔서 감사합니다! – shell

CSS 코드 :

nav ul li { display: inline; margin: 0 100px; }

html 코드 :

<nav> 
<ul> 
    <li><a href="#">Text</a></li> 
    <li><a href="#">Text</a></li> 
    <li><a href="#">Text</a></li> 
    <li><a href="#">Text</a></li> 
    <li><a href="#">Text</a></li> 
</ul> 
</nav>

JS 코드 :

function Func(){ 
var list = $('nav ul li'), 
    firstLi = list.first().offset().top, 
    lastLi = list.last().offset().top, 
    mLeft = parseInt(list.css('marginLeft')), 
    mRight = parseInt(list.css('marginRight')) 
if(firstLi != lastLi){ 
    --mLeft 
    --mRight 
    list.css({ 
     'marginLeft': mLeft, 
     'marginRight': mRight 
    }) 
    Func(); 
    } 
} 

Func();

다른 하나 개의 솔루션 :

다른 해상도의 미디어 쿼리를 사용할 수 있습니다. flexible boxes를 사용

출처

2014-02-07 07:16:11 Sandy

http://vanilla-js.com – bjb568

미디어 쿼리로 스타일을 바꿀 수 있다는 것을 알고 있지만 실제로 주문을 변경하는 방법이 있습니다. 것은, 첫 번째 리, 나는 블로그 콘텐츠를 가지고, 두 번째 하나는, 나는 날짜와 코멘트 정보가 있습니다. 따라서 해상도가 모바일로 바뀌면 날짜와 설명이 맨 아래에 표시됩니다. 나는 더 큰 해상도로 오른쪽을 유지하면서 상단에 그들을 필요합니다. – shell

예 미디어 쿼리 및 jQuery를 사용하여이 작업을 수행 할 수 있습니다. 다양한 해상도에서 jquery를 실행합니다. – Sandy

var litag = $('ul'); 
var litags = litag.children('li'); 
litag.append(litags.get().reverse());

출처

2014-02-07 07:27:05 Prashobh

해상도 변경으로 주문 변경

답변

관련 문제