Elemen tingkat blok dalam halaman web muncul secara berurutan. Untuk meningkatkan tampilan atau kegunaan halaman, Anda dapat mengubah urutan itu dengan membungkus blok, termasuk gambar, sehingga teks mengalir di sekitar gambar.
Dalam istilah desain web, efek ini dikenal sebagai gambar mengambang. Hal ini dicapai dengan properti CSSmengapung, yang memungkinkan teks mengalir di sekitar gambar rata kiri ke sisi kanannya (atau di sekitar gambar rata kanan ke sisi kirinya).
Mulai Dengan HTML
Contoh ini menambahkan gambar di awal paragraf (sebelum teks, tetapi setelah pembukaan
menandai). Inilah markup HTML awal:
Teks paragraf ada di sini. Dalam contoh ini, kami memiliki gambar foto headshot, jadi teks ini mungkin menggambarkan orang di headshot.
Secara default, halaman akan ditampilkan dengan gambar di atas teks, karena gambar adalah elemen tingkat blok dalam HTML. Ini berarti bahwa browser menampilkan jeda baris sebelum dan sesudah elemen gambar secara default. Untuk mengubah tampilan default ini menggunakan CSS, tambahkan nilai kelas (
kiri) ke elemen gambar untuk berfungsi sebagai pengait tempat properti dapat dilampirkan.Teks paragraf ada di sini. Dalam contoh ini, kami memiliki gambar foto headshot, jadi teks ini mungkin menggambarkan orang di headshot.
Perhatikan bahwa kelas ini tidak melakukan apa pun sendiri. CSS akan mencapai gaya yang diinginkan.
Menambahkan Gaya CSS
Tambahkan aturan ini ke situs lembar gaya:
.kiri {
mengapung: kiri;
bantalan: 0 20px 20px 0;
}
Gaya ini mengapungkan apa pun dengan kelas kiri di sebelah kiri halaman dan menambahkan sedikit lapisan ke kanan dan bawah gambar sehingga teks tidak membenturnya.
Di browser, gambar sekarang akan disejajarkan ke kiri; teks akan muncul di sebelah kanannya dengan spasi di antara keduanya.
Nilai kelas .kiri digunakan di sini adalah sewenang-wenang. Anda dapat menyebutnya apa pun yang Anda pilih karena ia tidak melakukan apa pun dengan sendirinya. Namun, Anda juga tidak boleh bahwa nilai apa pun yang Anda ubah di CSS juga harus tercermin dalam HTML.
Cara Lain untuk Mencapai Gaya Ini
Anda juga dapat mengambil nilai kelas dari gambar dan menatanya dengan CSS dengan menulis pemilih yang lebih spesifik. Pada contoh di bawah, gambar berada di dalam divisi dengan a isi utama nilai kelas.
Teks paragraf ada di sini. Dalam contoh ini, kami memiliki gambar foto headshot, jadi teks ini mungkin menggambarkan orang di headshot.
Untuk menata gambar ini, tulis CSS ini:
.img konten utama {
mengapung: kiri;
bantalan: 0 20px 20px 0;
}
Dalam skenario ini, gambar disejajarkan ke kiri, dengan teks mengambang di sekitarnya seperti sebelumnya, tetapi tanpa nilai kelas tambahan di markup. Melakukan ini dalam skala besar dapat membantu membuat file HTML yang lebih kecil, yang akan lebih mudah dikelola dan dapat meningkatkan kinerja.
Hindari Gaya Sebaris
Akhirnya, Anda bisa menggunakan gaya sebaris:
Teks paragraf ada di sini. Dalam contoh ini, kami memiliki gambar foto headshot, jadi teks ini mungkin menggambarkan orang di headshot.
Namun, ini tidak disarankan, karena menggabungkan gaya elemen dengan markup strukturalnya. Praktik terbaik menentukan bahwa gaya dan struktur halaman tetap terpisah. Pemisahan ini sangat membantu ketika Anda perlu mengubah tata letak halaman dan mencari ukuran layar dan perangkat yang berbeda dengan situs web yang responsif.
Jalinan gaya halaman dengan HTML membuat menulis kueri media untuk menyesuaikan situs Anda untuk layar yang berbeda jauh lebih sulit.