HTML, CSS 반응형 예제 : float 이용하기

 

float 를 이용한 코드를 작성하면....

 

<div class="explain-container">       <div>         <h4>피자</h4>         <p>풍부한 토마토 소스</p>       </div>       <div>         <h4>햄버거</h4>         <p>풍부한 불향</p>       </div>       <div>         <h4>치킨</h4>         <p>깊은 간장맛</p>       </div>       <div>         <h4>콜라</h4>         <p>느끼함을 제거하는 맛</p>       </div>     </div> <div style="float : none; clear : both"></div>

 

 

 

.explain-container>div {   float : left;   width : 25%; } @media screen and (max-width : 992px) {   .explain-container>div {     float : left;     width : 50%;   } } @media screen and (max-width : 768px) {   .explain-container>div {     float : none;     width : 100%;   } }