배너좌우정렬문

배너좌우정렬문

QA

배너좌우정렬문

본문


<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%; 를 추가해보세요.

모바일은 % 로 사이즈를 줘야 합니다.

 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT