배너좌우정렬문 채택완료
메롱블랙
2년 전
조회 3,071
</p>
<p><div id="banner" style="display: flex; justify-content: space-between;">
<div id="banner1" style="flex: 1; text-align: left;">
<a id="link2" href="" target="_blank"><img src="img/banner1.png" alt="배너 1" style="vertical-align: bottom;"></a>
</div></p>
<p> <!-- 두 번째 배너 -->
<div id="banner2" style="flex: 1; text-align: right;">
<a id="link3" href="" target="_blank"><img src="img/banner2.png" alt="배너 2" style="vertical-align: bottom;"></a>
</div>
</div></p>
<p>이런식인데 지금
모바일전용페이지라 이미지를 768px를 반쪼개서 두개를만들어서 각각 링크를 걸려고하는데
화면이 작아지면서 좌우에서 상하로 바뀌는현상이있는데 어떻게 수정해야될까요
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
다음과 같은 방법도 있으니 참고해 보세요
</p>
<p><div id="banner" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
<div id="banner1" style="flex: 1; text-align: left; max-width: 50%;">
<a id="link2" href="" target="_blank"><img src="img/banner1.png" alt="배너 1" style="vertical-align: bottom; width: 100%;"></a>
</div>
<!-- 두 번째 배너 -->
<div id="banner2" style="flex: 1; text-align: right; max-width: 50%;">
<a id="link3" href="" target="_blank"><img src="img/banner2.png" alt="배너 2" style="vertical-align: bottom; width: 100%;"></a>
</div>
</div>이렇게 수정하면 화면이 작아져도 배너 이미지가 좌우에서 상하로 바뀌지 않고, 적절하게 반으로 나뉘어 표시될 것으로 생각합니다. 물론 실제 디자인에 따라 스타일을 조절할 필요가 있을 수 있으니 디자인에 맞게 더 추가적인 스타일을 적용해야 할 수도 있을 것 같습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
메롱블랙
2년 전
수정됬습니다. 사랑해요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인