미디어 화면의 요소 정렬 변경

Question

화면의 x 축 또는 y 축이 다른 축보다 크거나 작을 때 위치가 변경되는 두 개의 div가 있습니다. JsFiddle 예제에서이를 테스트 할 수 있습니다. 두 된 div의 위치가 변경 될 때

JSFIddle

내 ButtonToolbar 요소의 위치는 엉망이됩니다. 이 포지셔닝 문제를 해결하는 방법은 무엇입니까?

위치 position:relative을 사용해 보았지만 작동시키지 못했습니다. 어떤 아이디어? 당신이 내 문제를 이해하기를 바랍니다.

Answer 1

대신 position:relative을 사용하는 대신 화면 상단에 표시 될 때 .dhFieldset에 float:left을 입력하십시오. 당신이 그 (것)들을 다른 아래 하나를 가고 싶어하지 않는 경우도

@media screen and (max-aspect-ratio: 1/1) { 
    .dhFieldset{ 
     color: white; 
     height: 35px; 
     width:80px; 
     margin-left:22px; 
     float:left; 
} 

, - 당신은 .dhButtonToolbar에 min-width을 설정해야합니다. 마치 완료 됨 here 또는 dhFieldset의 너비를 백분율 너비로 변경할 수 있습니다.

Answer 2

문제가 무엇인지 알아 보겠습니다. 미디어 쿼리에서 "dhFieldset"이 표시되는 방식을 변경해야합니다.

그래서 같이 갈 것 :

정상 위치 : 화면 상단에서

.dhFieldset{ 
    color: white; 
    font-size:6px; 
    width: 27px; 
    height:80px; 
    background-color:green; 

} 

: 여기

@media screen and (max-aspect-ratio: 1/1) { 
.dhFieldset{ 
    color: white; 
    font-size:6px; 
    height: 27px; 
    width:80px; 
    margin-left:22px; 
    float:left; 
} 

가 Updated jsFiddle입니다.

는 희망이 도움이! 건배.