Contoh Apung CSS

Halaman ini menyediakan contoh yang biasa tentang floating.

Grid / Kotak yang sama lebar

Box 1
Box 2
Box 1
Box 2
Box 3

Dengan menggunakan float Properti, dapat dengan mudah menggerakkan konten kotak bersama-sama:

Contoh

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Tiga kotak (empat kotak menggunakan 25%, dua kotak menggunakan 50%, dan seterusnya) */
  padding: 50px; /* Jika perlu menambahkan jarak di antara gambar */
}

Cuba sendiri

Apa itu box-sizing?

Anda dapat dengan mudah membuat tiga kotak menggerakkan bersama-sama. Namun, ketika anda menambahkan beberapa konten untuk memperluas lebar setiap kotak (seperti padding atau border), kotak ini akan rusak. box-sizing Properti ini memungkinkan kami untuk termasuk padding dan border dalam lebar (dan tinggi) kotak keseluruhan, memastikan bahwa padding tetap berada di dalam kotak dan tidak patah.

Anda dapat menemukan di Box Sizing CSS Di bab ini, anda akan belajar tentang properti box-sizing.

Gambar bersama-sama

Jenis kotak ini (The grid of boxes) juga dapat digunakan untuk menampilkan gambar bersama-sama:

Contoh

.img-container {
  float: left;
  width: 33.33%; /* Tiga kotak (empat kotak menggunakan 25%, dua kotak menggunakan 50%, dan seterusnya) */
  padding: 5px; /* Jika perlu menambahkan jarak di antara gambar */
}

Cuba sendiri

Kotak yang sama lebar

Dalam contoh sebelumnya, anda telah belajar bagaimana untuk menggerakkan kotak bersama-sama dengan lebar yang sama. Namun, untuk membuat kotak yang memiliki tinggi yang sama adalah tidak mudah. Namun, solusi yang cepat adalah untuk menetapkan tinggi yang tetap, seperti contoh di bawah ini:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

Contoh

.box {
  height: 500px;
}

Cuba sendiri

Namun, dengan cara ini, fleksibiliti hilang. Jika anda dapat memastikan bahawa kandungan di dalam kotak selalu sama, maka ia boleh. Tetapi, seringkali, kandungan adalah berbeza. Jika anda mencuba contoh di atas di dalam ponsel, anda akan lihat bahawa kandungan kotak kedua akan dipaparkan di luar kotak. Ini adalah tempat CSS3 Flexbox akan membantu - kerana ia dapat mengecualikan kotak untuk memastikan ia sama tinggi dengan kotak yang paling tinggi:

Contoh

Mencipta kotak fleksibel menggunakan Flexbox:

Box 1 - Ini adalah beberapa teks untuk memastikan kandungan benar-benar tinggi. Ini adalah beberapa teks untuk memastikan kandungan benar-benar tinggi. Ini adalah beberapa teks untuk memastikan kandungan benar-benar tinggi. Ini adalah beberapa teks untuk memastikan kandungan benar-benar tinggi. Ini adalah beberapa teks untuk memastikan kandungan benar-benar tinggi.
Box 2 - Tinggi saya akan diikuti dengan box 1.

Cuba sendiri

Masalah tunggal Flexbox adalah ia tidak berfungsi di Internet Explorer 10 atau versi sebelumnya. Anda boleh melihat di laman kami Flexbox CSS Pelajari lebih banyak tentang modul susunan Flexbox di dalam bab.

Menu navigasi

Tukar float Dipakai bersama senarai penanda hyperlink untuk mencipta menu horizontal:

Contoh

Cuba sendiri

Contoh susunan Web

Menggunakan float Atribut menyelesaikan seluruh susunan Web adalah sangat biasa:

Contoh

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Cuba sendiri

Beberapa contoh lain

Imej dengan sempadan dan marjin bergerak ke kanan paragraf
Membuat imej bergerak ke kanan paragraf. Tambahkan sempadan dan marjin kepada imej.
Imej dengan tajuk bergerak ke kanan
Membuat imej dengan tajuk bergerak ke kanan.
Membuat huruf pertama paragraf bergerak ke kiri
Membuat huruf pertama paragraf bergerak ke kiri dan menetapkan gaya huruf itu.
Menggunakan gerakan untuk mencipta laman web
Menggunakan gerakan untuk membuat halaman utama yang mempunyai navigasi horizontal, tajuk halaman, kaki halaman, navigasi kiri dan kandungan utama.

Semua atribut penuh CSS yang menggerakkan

Atribut Penerangan
box-sizing Pengiraan lebar dan tinggi elemen: sama ada ia memasukkan marjin dalaman dan sempadan.
clear Tentukan mana-mana elemen yang boleh disesuaikan dengan elemen yang dipembersihkan dan di mana pihak untuk digerakkan.
float Tentukan bagaimana elemen sepatutnya digerakkan.
overflow Tentukan apa yang akan terjadi jika kandungan meluas daripada kawasan bingkai elemen.
overflow-x Tentukan bagaimana sebarang kandungan yang meluas daripada kawasan isian elemen beratasa, bagaimana penanganan hujung kiri/kanan kandungan.
overflow-y Tentukan bagaimana sebarang kandungan yang meluas daripada kawasan isian elemen beratasa, bagaimana penanganan hujung atas/bawah kandungan.