반응형 웹 Column drop

 

열 드롭 Column drop

 

전체 폭이 가득찬 다중 열 레이아웃을 위해서 화면이 각 열이 컨텐츠에 비해 너무 좁아지면 열들이 수직으로 떨어지며 하나씩 쌓이게 된다. 결국 모든 열이 수직으로 쌓이게 된다. 이 패턴에서 중단점(breakpoints)은 컨텐츠에 따라 선택할 수 있고 디자인에 따라 변할 수 있다.

 

 

 

 

css  

* {margin:0; padding:0;}
	#box_a {height:400px; background:#fcb354; float:left; width:30%;}
	#box_b {height:400px; background:#f1779e; float:left; width:50%;}
	#box_c {height:400px; background:#24bbaf; float:right; width:20%;}
	
	@media screen and (max-width:1024px){
		#box_b {float:none; width:auto;}
		#box_c {float:none; clear:both;width:auto;}
	}
	
	@media screen and (max-width:800px){
		#box_a {float:none; width:auto;}
	}

html

참조 : http://www.tendency.co.kr/new/TLab/tlab_view.asp?sbdtype=0000300007&bno=11#quick main