How To - 반응형 플로트

w3.css

반응형 플로트

CSS를 사용하여 반응형 플로팅 요소를 만드는 방법을 알아보자.

반응형 플로트

미디어 쿼리를 사용하고 요소가 떠 있어야 하는 시점에 지정된 화면 너비(픽셀)를 설정한다.

1단계) HTML 추가

<div class="clearfix">
  <span class="float-right-sm">Float right =<768px</span><br>
  <span class="float-right-lg">Float right =>769px</span><br>
</div>

2단계) CSS 추가

/* Float to the right on screens that are equal to or less than 768px wide */
@media (max-width: 768px) {
  .float-right-sm {
    float: right;
  }
}

/* Float to the right on screens that are equal to or greater than 769px wide */
@media (min-width: 769px) {
  .float-right-lg {
    float: right;
  }
}

기본 예시

예제 보기