HTML에서이 div를 만드는 방법

Question

3 개의 div로 구성된 큰 레이아웃 - div의 일부가 있습니다. 따라서 페이지를 축소 할 때 서로를 어떻게 배치 할 수 있습니까? 보고있는 Tnx! http://jsfiddle.net/8x5xchps/ :

Answer 1

여기 수레와 미디어 쿼리를 사용하여 기본 방법입니다. 스태킹 순서의 변경 사항을 보려면 화면의 크기를 조정하십시오.

HTML :

<div id = "wrapper"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

<p>Sample paragraph</p> 

CSS : 당신은 무엇을

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    padding: 10px; 
} 

#wrapper > div { 
    width: calc(100%/3); 
    float: left; 
    height: 200px; 
} 

#wrapper > div:first-of-type { 
    background-color: rgba(255, 0, 0, 0.5); 
} 

#wrapper > div:nth-of-type(2) { 
    background-color: rgba(0, 255, 0, 0.5); 
} 

#wrapper > div:nth-of-type(3) { 
    background-color: rgba(0, 0, 255, 0.5); 
} 

@media screen and (max-width: 500px) { 
    #wrapper > div { 
     float: none; 
     width: auto; 
    } 
}