각각의 div 가로비율 조정문의드립니다.

각각의 div 가로비율 조정문의드립니다.

QA

각각의 div 가로비율 조정문의드립니다.

본문

2949787842_1560393456.6508.jpg

위의 이미지형태처럼 상황에 따라 div 각 영역의 가로비율이 변동이 생겨야 되는데요.

'가'형태에서 '나'형태, 즉 A영역이 빠졌을때, 반대로 '나'형태에서 '가'형태로 A영역이 다시 추가됐을때 상황에 따라 유동성의 페이지가 필요합니다.

여러 방법으로 시도를 해봤는데도 생각대로 진행이 안됩니다.

어떤 방법이 있을까요?

 

 

이 질문에 댓글 쓰기 :

답변 2

아래 코드 그대로 실행해보세요.

같은 코드로 두개일때 세개 일때 가변적으로 크기가 변해요. 한개일때도 물론 마찬가지

<style>
    .flexitems { display:flex; flex:1 0 25%; margin:0; padding:0; height:50px;  border:4px solid ; }
</style>
<div style="display:flex; flex-wrap:wrap; padding:10px; border:4px dashed; ">
    <div class="flexitems">여기 영역 1의 1</div>
    <div class="flexitems">여기 영역 1의 2</div>
    <div class="flexitems">여기 영역 1의 3</div>
</div>


<div style="display:flex; flex-wrap:wrap; padding:10px; border:4px dashed; ">
    <div class="flexitems">여기 영역 2의 1</div>
    <div class="flexitems">여기 영역 2의 2</div>
</div>

 


<div style="display:flex; flex-wrap:wrap; padding:10px; border:4px dashed; ">
    <div class="flexitems">여기 영역 3의 1</div>
</div>

상황이 어떠한 상황인지에 따라 다릅니다.
php에서 A 가 있는지 없는지를 판단하는거라면 A가 있을떄랑 없을때 class 를 변경해서 하면되구요
반응형일때면 media query 로 브라우저 넓이에 의해 css 를 수정해주면 됩니다.

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

회원로그인

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