배너좌우정렬문
본문
<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>
<!-- 두 번째 배너 -->
<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>
이런식인데 지금
모바일전용페이지라 이미지를 768px를 반쪼개서 두개를만들어서 각각 링크를 걸려고하는데
화면이 작아지면서 좌우에서 상하로 바뀌는현상이있는데 어떻게 수정해야될까요
답변 2
다음과 같은 방법도 있으니 참고해 보세요
<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>
이렇게 수정하면 화면이 작아져도 배너 이미지가 좌우에서 상하로 바뀌지 않고, 적절하게 반으로 나뉘어 표시될 것으로 생각합니다. 물론 실제 디자인에 따라 스타일을 조절할 필요가 있을 수 있으니 디자인에 맞게 더 추가적인 스타일을 적용해야 할 수도 있을 것 같습니다.
수정됬습니다. 사랑해요
style 에 width:49%; 를 추가해보세요.
모바일은 % 로 사이즈를 줘야 합니다.
이렇게 하니깐
이미지는 줄어드는데 위아래로나와요 ㅠ
%를 더 수정해보세요..
45% 라던가??
답변을 작성하시기 전에 로그인 해주세요.
