CSS 레이아웃 관련 질문드려요

CSS 레이아웃 관련 질문드려요

QA

CSS 레이아웃 관련 질문드려요

본문

CSS 로 레이아웃을 만들고 있는데요. 막히는 부분이 있어서 질문드려요.

 

https://www.w3schools.com/code/tryit.asp?filename=G34CPJ22AN4R

 

위 링크를 보시면, 섹션부분에 높이를 지정해 주었을때는 섹션부분 스타일이 잘 적용이 되는데요.

높이를 auto로 지정해 주어서 안에 칼럼 높이에 따라 섹션 높이가 자동으로 바뀌게 끔 하려고 설정해 주면, 섹션 백그라운드 색깔이 적용이 안되네요.

 

https://www.w3schools.com/code/tryit.asp?filename=G34CU1D735LX

 

무엇인가 놓친것 같은데 잘 모르겠습니다. 적용이 안되는 이유가 궁금하고, 적용하려면 어떻게 해야하는지 가르침 부탁드립니다.

이 질문에 댓글 쓰기 :

답변 1


<div class="section">
 <div class="article">
  <div class="test1">왼쪽 칼럼</div>
 </div>
 <div class="article">
  <div class="test2">오른쪽 칼럼</div>
  섹션부분
 </div>
 <div style="display: block; clear: both;"></div>
</div>

 

div.section 안의 div.article 들은 float상태이므로 공중에 떠있다고 보시면 div.section 높이를 가질수 없습니다.그래서 끝나기전에 float을 없애주시면 됩니다.

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

회원로그인

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