How To

Cara Membuat Responsive Float Pada Website

Di bawah ini kita akan mempelajari cara membuat responsive float dengan CSS.

Responsive Float

Gunakan kueri media dan setel lebar layar yang ditentukan (dalam piksel) untuk mengetahui kapan elemen harus melakukan float:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.float-right-sm {
  background-color: yellow;
}

.float-right-lg {
  background-color: pink;
}

@media (max-width: 768px) {
  .float-right-sm {
    float: right;
  }
}

@media (min-width: 769px) {
  .float-right-lg {
    float: right;
  }
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
</style>
</head>
<body>

<h2>Responsive Floats</h2>
<p>Kelas float-right-sm akan melakukan float tepat di layar yang sama atau KURANG DARI 768 piksel. Float-right-lg akan mengapung tepat di layar yang sama atau LEBIH BESAR DARI 769px. Perhatikan bahwa kami juga menggunakan clearfix untuk membersihkan float. </p>
<p> Ubah ukuran jendela browser untuk melihat hasilnya.</p>

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

</body>
</html>

Hanifah Nurbaeti

Share
Tags: CSSHow To