반응형(@media (max-width:1100px)), 헤더(hd_wrapper)의 아이템 배열열을 역방향으로 바꾸고 싶습니다. 채택완료
- 반응형(@media (max-width:1100px)), 헤더(hd_wrapper)의
-
- 아이템 배열열(https://policy.glitter.kr/qa_php/max-1100.png" rel="nofollow noreferrer noopener" target="_blank">https://policy.glitter.kr/qa_php/max-1100.png)을
-
- 역방향(flex-direction: row-reverse)으로 바꾸면
-
- 배열은 바뀌나(https://policy.glitter.kr/qa_php/row-reverse;-page.png" rel="nofollow noreferrer noopener" target="_blank">https://policy.glitter.kr/qa_php/row-reverse;-page.png),
-
- 간격조절(justify-content: space-between)이 안 됩니다.
-
- 그런데, @media (min-width:1101px), 1101px 이상의 화면에서는
-
- 잘 반응합니다(https://policy.glitter.kr/qa_php/row-reverse-css-2.png).
- . . . . . .
- 저의 default.css는 아래와 같습니다.
</p>
<p>. </p>
<p>#hd_wrapper { max-width: 1200px; margin: 0 auto; position: relative;</p>
<p>background: var(--primaryColor); border-radius: 40px; height: 60px; display: flex;</p>
<p>justify-content: space-between; align-items: center; padding: 0px 25px; } </p>
<p>.</p>
<p>@media (min-width:1101px) {</p>
<p>.</p>
<p> #hd_wrapper { flex-direction: row-reverse; max-width: 1200px; min-width: 1200px;</p>
<p>width: 100%; padding: 0px 30px;}</p>
<p>.</p>
<p>}</p>
<p>@media (max-width:1100px) {</p>
<p>.</p>
<p> #hd_wrapper { width: 100%; padding: 0px 18px;}</p>
<p> /*</p>
<p> #hd_wrapper { display: flex; flex-direction: row-reverse; justify-content: space-between;</p>
<p>align-items: flex-start; width: 100%; padding: 0px 18px;}</p>
<p> */</p>
<p>.</p>
<p>.</p>
<p>.-
- 여러모로 시도하여 보았으나 초보에겐 한계인 듯하여
-
- = = = 도움을 청합니다. = = =
-
답변 3개
http://sir.kr/data/editor/2405/978180634_1716877825.5178.png" width="100%" />
이 화면을 원하는게 맞나요 ?
</p>
<p>default.css : 363라인</p>
<p>@media (max-width: 1100px) {</p>
<p>#opener_header_search {</p>
<p>margin: -5px 0 0 auto;</p>
<p>} </p>
<p>삭제하세요 (마진만)
</p>
<p>default.css :369라인</p>
<p>@media (max-width: 1100px) {</p>
<p>#opener_aside{</p>
<p>margin-right: auto; </p>
<p>}</p>
<p>마진 라이트 삭제하세요 (마진만)
답변에 대한 댓글 2개
- #opener_header_search {margin: -5px 0 0 auto;} 값은 없습니다
[code]
#header_search { display: none; position: absolute; bottom: -64px; left: 0;
width: 100%; height: 60px; z-index: 9999; box-shadow: 0px 3px 6px #00000032; }
[/code]
-
- 수정후, 이렇습니다(https://policy.glitter.kr/qa_php/row-reverse-css-4.png).
- - - - -
-
- 제가 잘 못 보았습니다.
-
- 찾았습니다.
-
- 감사합니다. 잘 작동합니다(https://policy.glitter.kr/qa_php/row-reverse-css-5.png).
-
- 행복하세요 ~~~
-
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
- 제가 잘 못 보았습니다.
-
- 찾았습니다.
-
- 감사합니다. 잘 작동합니다(https://policy.glitter.kr/qa_php/row-reverse-css-5.png).
-
- 행복하세요 ~~~
-
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 3개
- 미니님a 의 말씀을 인지를 못 하고있습니다.
-
- [code]
.
#hd_wrapper {
flex-direction: row-reverse; width: 100%; justify-content: space-between;
padding: 0px 18px; flex-grow: 1;
}
.
[/code]
-
- 위치는 바뀌였으나 여백 조정( justify-content: space-between)이
-
- 이렇습니다 (https://policy.glitter.kr/qa_php/row-reverse-css-3.png).
-
- 초보라 이해는 안 되지만 구글링 하여 보겠습니다.
-
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
제가 삭제하라는 것만 삭제 해주세요