아이템 위치 변경, @media (max-width:1100px)에서 aside_full_down_menu -item의 위치 변경
본문
- 그누보드6, 기본 테마, aside(https://policy.glitter.kr/qa_php/min-1101.png)의
- down_menu -item(https://policy.glitter.kr/qa_php/max-1100.png)의 위치를
- 오른쪽 끝으로 옮기고 싶습니다.
-
- default.css의 @media (max-width:1100px)-(https://policy.glitter.kr/qa_php/css-org.png)에서
@media (max-width:1100px) {
#tnb,
#hd_wrapper,
#wrapper { width: 100%; }
- 설정을 변경하였습니다.
-
- 역방향(https://policy.glitter.kr/qa_php/row-reverse-css.png) 설정 후,
@media (max-width:1100px) {
#tnb,
#hd_wrapper,
#wrapper { flex-direction: row-reverse; width: 100%; }
- 위치는 바뀌였으나 (https://policy.glitter.kr/qa_php/row-reverse;-page.png) 중앙에 집중됐습니다.
-
- 추가 설정(https://policy.glitter.kr/qa_php/space-between.png)을 하여 보았으나 - - -
@media (max-width:1100px) {
#tnb,
#hd_wrapper,
#wrapper { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; width: 100%; }
-
- 결과를 얻지 못하여 도움을 요청합니다.
-
답변 1
일반스타일에서 display: flex; 로 되어있는 상태라고한다면.
다음과 같이 해보세요~화이팅~
#wrapper {flex-direction: row-reverse;width: 100%; justify-content: space-between; align-items: flex-start; }
-
- 안녕하세요.
-
- 휴일은 잘 보내셨는지요!
-
- 네~ 해 보겠습니다.
-
- 감사합니다.
- - - - - - - - - - - - - - - -
- 말씀에 따라 이렇게(https://policy.glitter.kr/qa_php/style-new-.png) 설정 ;
-
- ㅠ ㅠ - 이 전의 결과와 같습니다( https://policy.glitter.kr/qa_php/item_move1.png )
-
- 위치는 바뀌였는데, 여백(space-between) 스타일 조정이 안 되고 있습니다.
-
- @media (min-width:1101px) 에서는 display:grid; 으로 되어 있습니다.
@media (min-width:1101px) {
#wrapper { display:grid; gap: 20px; grid-template-columns: 1000px 180px; width: 1200px; } }
- 이렇게 되어 있습니다.
-
gap:20px 가 이미 여백설정값을 정해져 있는 상태입니다. 따라서
다음과 같이 위치선정을 추가 해주시면될것 같습니다.
#tnb {grid-column: 2;}
#hd_wrapper { grid-column: 1;}
만약 display: flex; 설정을 해준상태라면 다음과 같은 형식으로 여백을 조정을 해줄수도 있을것 같습니다.
왼쪽
#tnb { margin-right: 0; margin-left: 20px; }
오른쪽
#hd_wrapper { margin-left: 0;margin-right: 20px; }
만약 여백없이 한다면 auto 설정하면될것 같네요 테스트 해보시고 설정 조절해보세요
-
- 시도 하여 보겠습니다.
- - - - - -
- 이렇게(https://policy.glitter.kr/qa_php/style-new-2.png) 변경하였으나.
-
- 아무런 변화가 없습니다(https://policy.glitter.kr/qa_php/row-reverse;-page.png).
.