Letakkan blok yang terdiri dari gambar dan teks, dan teks tidak boleh membungkus gambar.

Yang kiri benar, yang kanan salah

Kondisi tambahan: lebar teks maupun gambar tidak ditentukan secara ketat. Jika tidak ada gambar, teks menempati seluruh lebar yang dialokasikan.

Larutan

Mari kita coba menulis gaya. Semuanya jelas dengan kolom kiri:

Foto ( float: left; /* atur pembungkusnya */ margin:10px; /* lekukan untuk kecantikan */ display:inline; /* untuk IE6, agar lekukan kiri tidak berlipat ganda */ )

Sekarang gambarnya ada di kiri, dan teks mengelilinginya di sebelah kanan. Namun jika ada lebih banyak teks, maka akan “menyelam” di bawah gambar (lihat gambar di atas), dan kita tidak memerlukannya.

Hal pertama yang terlintas dalam pikiran adalah “mengambang” teks. Namun dalam kasus ini, jika Anda tidak menentukan lebarnya, teks akan berada di bawah gambar!

float:left/right akan membutuhkan lebar - jika tidak, tidak akan ada yang berhasil!

Mari kita pikirkan lebih jauh... .description( : XXXpx) mungkin tampak seperti solusi yang bagus. Memang, dalam beberapa situasi opsi ini berhasil. Misalnya saja ukuran gambarnya masih diatur. Katakanlah itu adalah blok berita karet. Gambar tidak boleh lebih lebar, katakanlah 200 piksel, tetapi teks sudah meregang dan menempati seluruh lebar yang tersisa.

Namun, opsi ini memiliki kelemahan yang signifikan. Jika tidak ada balok bergambar, lekukannya akan tetap berupa lubang yang janggal. Tentu saja, Anda dapat menghapusnya menggunakan pemilih elemen saudara, seperti yang dijelaskan dalam artikel, tetapi dalam kasus kami ada solusi lain.

Anda dapat mencegah pembungkusan hanya dengan menambahkan :hidden; untuk kolom teks. Dengan melakukan ini, kami akan menetapkan konteks pemformatan baru untuknya (topik ini akan segera dibahas lebih detail).

Satu-satunya browser yang bereaksi salah terhadap hal ini, tentu saja, adalah IE6. Kita atur kolomnya khusus untuk itu, misalnya “float” (lebarnya tidak perlu diatur).

Jadi, solusi untuk masalahnya terlihat seperti ini:

Foto ( float: left; /* atur float */ margin:10px; /* lekukan untuk kecantikan */ display:inline; /* untuk IE6, agar lekukan kiri tidak berlipat ganda */ ) .description( overflow:hidden ; ) * html .deskripsi( float:kiri; )

Seperti biasa, dalam kondisi pertempuran kami menggunakan .

Cara membungkus teks di sekitar gambar dalam HTML dan CSS - 4.4 dari 5 berdasarkan 18 suara

Saat ini, gambar digunakan hampir di semua tempat di Internet. Tidak mungkin membayangkan halaman web tanpa gambar. Gambar menarik perhatian, meningkatkan tampilan dan persepsi teks. Oleh karena itu, dalam pelajaran ini kita akan mempelajari cara memposisikan gambar dalam kaitannya dengan teks dan melihat cara membungkus teks di sekitar gambar dalam HTML, serta menggunakan properti dan nilai CSS.

Membungkus teks di sekitar gambar menggunakan HTML

Cara termudah untuk memposisikan gambar pada halaman adalah dengan menggunakan alat HTML. Namun metode ini, dibandingkan dengan kemampuan CSS, memiliki kelemahan: metode ini tidak memungkinkan Anda mengatur margin antara gambar dan teks, tetapi Anda hanya dapat membuat teks mengalir di sekitar gambar.

Mari kita lihat semuanya secara berurutan. Untuk menyisipkan gambar ke dalam halaman HTML, gunakan tag img; untuk lebih jelasnya lihat pelajaran cara menyisipkan gambar ke dalam HTML :. Oleh karena itu, untuk menyisipkan gambar ke dalam teks halaman HTML, cukup dengan menuliskan kode berikut:

Dimana foto.jpg adalah jalur relatif ke gambar..jpg

Tag img memiliki atribut align, yang menentukan di tepi mana gambar akan ditempatkan dan di tepi mana teks akan mengalir di sekitarnya (misalnya, align="left" di sepanjang tepi kiri). Atribut align memiliki arti sebagai berikut:

• kiri - gambar akan diposisikan di tepi kiri, dan teks akan mengalir mengelilinginya ke kanan;
• kanan - gambar akan ditempatkan di sebelah kanan, dan teks akan mengalir di sekitarnya di sebelah kiri;
• bawah - bertanggung jawab untuk perataan vertikal, sedangkan gambar akan berada di sebelah kiri, dan bagian bawah gambar akan berlawanan dengan baris teks pertama, nilai ini diatur secara default;
• atas - sama dengan nilai sebelumnya, hanya baris teks yang akan ditempatkan di sepanjang batas atas gambar;
• tengah - dengan nilai ini, bagian tengah gambar disejajarkan dengan garis dasar.

Sekarang mari kita lihat setiap elemen dalam praktiknya.

1. Seperti yang telah saya sebutkan, secara default gambar disetel ke bootom, yaitu terlepas dari apakah kita menyetelnya atau tidak, gambar kita dalam kaitannya dengan teks akan diposisikan seperti ini:

2. Untuk menyelaraskan gambar ke kiri, dan teks mengalir di sekitarnya ke kanan, Anda perlu menulis yang berikut:

3. Untuk menyelaraskan gambar ke kanan, Anda perlu menulis sesuai:

4. Sekarang mari kita lihat perataan vertikal. Jika Anda menerapkan nilai teratas, baris teks pertama akan ditempatkan di tepi atas gambar.

5. Sejajarkan teks ke tengah gambar. Teknik ini sangat baik digunakan jika Anda perlu menempatkan gambar kecil di tengah garis.

Bungkus teks di sekitar gambar menggunakan properti CSS

Faktanya, contoh pembuatan pembungkusan teks dan pemosisian gambar yang kita bahas di atas sudah agak ketinggalan jaman; sekarang sudah menjadi kebiasaan untuk menjadikan semua elemen bertanggung jawab atas tampilan halaman menggunakan properti dan nilai CSS.

Mari kita lihat contoh sederhana bagaimana membuat teks membungkus gambar, ketika gambar terletak di tepi kiri dan teks mengalir mengelilinginya di sebelah kanan. Pada saat yang sama, kami akan menetapkan indentasi tertentu antara teks dan gambar.

Pertama, kita perlu menetapkan kelas tertentu pada gambar kita, di sini Anda dapat menggunakan kata apa saja, yang utama adalah Anda memahami dengan tepat apa yang menjadi tanggung jawab kelas ini dalam desain halaman Anda. Ini dilakukan seperti ini:

Sekarang kelas leftfoto perlu diberikan beberapa style CSS.

Foto kiri( float:kiri; margin: 4px 10px 2px 0px; )

Kode ini ditempatkan di antara tag ..., diapit dalam tag atau ditempatkan di stylesheet CSS eksternal.

Mari kita lihat elemen yang kita atur di sini:

• mengapung:kiri; - kita memposisikan gambar ke kiri dan membuat teks mengalir di sekitar gambar di sebelah kanan, ini pada dasarnya sama dengan atribut align="left" .
• margin: 4px 10px 2px 0px; - kita atur margin luarnya, 4px dari atas, 10px dari kanan, 2px dari bawah dan 0px dari kiri gambar.

Membatalkan pembungkusan blok (float) adalah operasi paling umum saat menata halaman HTML. Kita akan melihat semua cara yang diketahui untuk mengganti efek properti float CSS.

Sebelum kita mendalami teknik pembersihan aliran sungai, mari kita lihat masalah yang ingin kita selesaikan.

Kasus khas tata letak HTML

Blok .el-1 Dan .el-2 ditempatkan berdampingan di dalam wadah .wadah, dan satu elemen .utama mengikuti setelahnya .wadah:

Kami ingin ketinggian wadah .wadah sama dengan tinggi badan anak terpanjangnya (yaitu salah satunya .el-1, atau .el-2) dan agar menjadi blok .utama berada setelah blok itu .wadah.

Dan inilah yang kami lihat: .wadah(bingkai hitam) roboh seolah tidak ada apa-apa di dalamnya, blokir .utama(blok dengan latar belakang merah) terletak di bawah blok .wadah, seperti yang kita inginkan, tapi pada saat yang sama dia bersembunyi di balik balok .el-1(dengan latar belakang kuning) dan .el-2(dengan latar belakang merah muda). Tuhan tahu apa! Jika bosku melihat ini, dia pasti akan memberitahuku, "Gunakan, Shurik, tata letak meja". Untungnya, saat-saat ketika halaman web ditata dalam tabel sudah lama berlalu dan kita bisa baik-baik saja tanpanya. Tidak percaya padaku? Baca terus.

Terlepas dari kenyataan bahwa banyak yang menganggap ini sebagai bug browser, ini hanyalah prinsip kerja elemen mengambang. Oleh karena itu, kita perlu memaksa elemen induk untuk diperluas agar dapat mengakomodasi elemen turunan sepenuhnya. Kemudian, elemen-elemen berikut akan ditempatkan di bawah wadah.

Metode 1: Metode Jadul

Seperti yang Anda ketahui, properti CSS jernih mengatur pada sisi elemen mana elemen lain dilarang mengalir di sekitarnya, oleh karena itu sifat ini dapat mencegah elemen tumpang tindih di atas elemen mengambang. Idenya adalah ini: masukkan elemen kosong yang memiliki properti clear di bawah blok melayang. Merupakan tradisi lama untuk menggunakan kelas tertentu untuk elemen seperti ini, sehingga Anda dapat menggunakannya dalam HTML Anda. Berikut kode CSS klasiknya:

Jelas ( jelas: keduanya; )

Yang berlaku untuk tata letak HTML kami:

Contoh demo kami diimplementasikan menggunakan metode ini:

Jika Anda tidak peduli dengan wadah yang runtuh, cukup blok yang salah tempat .utama, lalu Anda juga dapat menempatkan elemen "aliran pembersihan" setelah wadahnya. Namun, jika Anda memutuskan untuk melakukan ini, maka akan lebih mudah untuk menambahkan properti clear ke elemen itu sendiri .utama.

Ini adalah metode yang sederhana dan mudah. Namun, praktik tata letak modern cenderung memisahkan konten dari gaya, jadi sebaiknya tidak menggunakannya.

Metode 2: properti overflow

Menggunakan properti meluap di dalam tag .wadah, kita dapat memaksa wadah untuk mengembang setinggi elemen yang ditempatkan. CSS kita akan terlihat seperti ini:

Wadah ( overflow: tersembunyi; /* atau "otomatis" */ )

HTML kita akan tetap sama seperti aslinya, tanpa elemen tambahan. Inilah yang kami dapatkan sebagai hasilnya:

Sayangnya, metode ini memiliki kelemahan: elemen anak apa pun yang melampaui wadah akan terpotong (dalam kasus overflow: tersembunyi;) atau menyebabkan bilah gulir muncul (dalam kasus overflow: auto;).

Metode 3: kelas "clearfix".

Kami membuat kelas .clearfix dengan elemen semu ::sebelum Dan ::setelah dan beri mereka display: table , yang membuat sel tabel anonim. Kelas ini akan digunakan untuk menghapus elemen mengambang. Kode CSSnya terlihat seperti ini:

Clearfix:sebelum, .clearfix:setelah ( konten: ""; tampilan: tabel; ) .clearfix:setelah ( jelas: keduanya; ) .clearfix ( zoom: 1; /* yaitu 6/7 */ )

Mari kita ubah sedikit kode HTMLnya dengan menambahkan kelasnya wadah Kelas perbaikan yang jelas:

Inilah hasil kelas baru kami:

Jika Anda tidak memerlukan dukungan untuk browser di bawah IE8, maka kode kami akan dikurangi secara signifikan:

Clearfix:setelah ( konten: ""; tampilan: tabel; hapus: keduanya; )

Metode 4: nilai mengandung-mengapung untuk tinggi minimum

Kontainer ( min-height: mengandung-float; )

Kode ini memberikan efek yang hampir sama dengan clearfix atau overflow, namun dengan satu baris kode dan terlebih lagi tidak memiliki kekurangan yang telah kita bahas sebelumnya. Sayangnya, belum ada browser yang mendukung properti ini, jadi ingatlah saja.

Jadi, Anda memiliki banyak metode "clearfix" yang berbeda. Penerapan kelas .clearfix telah menjadi standar dan saya sangat merekomendasikan menggunakannya dibandingkan dua metode sebelumnya.

Tugas

Tambahkan gambar ke halaman sehingga melingkari teks di sebelahnya.

Larutan

Membungkus teks di sekitar gambar biasanya digunakan untuk menyusun materi secara kompak dan menghubungkan ilustrasi dan teks menjadi satu. Float itu sendiri dibuat menggunakan properti gaya float yang ditambahkan ke pemilih IMG. Nilai kiri menyelaraskan gambar ke kiri, nilai kanan - ke kanan. Dalam hal ini, aliran terjadi di sepanjang sisi bebas lainnya.

Contoh 1. Membungkus gambar

HTML5 CSS 2.1 YAITU Cr Op Sa Fx

Laporan Letnan Bokatuev

Kemarin, saat operasi pengintaian, kelompok kami diserang oleh musuh tak dikenal berseragam kamuflase Alien. Sebagai hasil dari pertahanan yang efektif dan serangan balik yang cepat, sekelompok besar militan berhasil dikalahkan dan dilempar kembali. Tidak ada korban jiwa di antara personel. Para pejuang kelompok pengintai menunjukkan keterampilan luar biasa dalam menggunakan senjata. Yang paling menonjol dalam pertempuran adalah pemimpin peleton M.A. Kudryashev, yang dengan bijak menggunakan sumber daya manusia peletonnya. Sebagai hasil dari operasi tersebut, elemen budaya luar bumi ditangkap dan dipindahkan ke kelompok analitis.

Siaran pers dari kelompok analitis

Senjata psikotropika dikembangkan di laboratorium rahasia kami sebagai bagian dari Proyek Pandora. Sebagai hasil dari percobaan yang gagal, sebagian besar ilmuwan yang mengerjakan perangkat tersebut terkena radiasi psikotropika, dan mereka, dalam keadaan bersemangat, membongkar prototipe tersebut. Mungkin para ilmuwan kita masih bersemangat.

Hasil dari contoh ini ditunjukkan pada Gambar. 1.

Beras. 1. Teks dengan ilustrasi

Menggunakan properti float memaksa teks untuk pas di dalam gambar. Oleh karena itu, contoh ini memperkenalkan properti universal margin , yang menambahkan padding antara gambar dan teks. Properti ini sekaligus mengatur lekukan pada bagian atas, kanan, bawah, dan kiri foto.

Pada artikel ini, kami akan memberi tahu Anda tentang fitur HTML dan CSS yang berhubungan dengan gambar. Anda akan belajar cara memasukkannya ke dalam dokumen HTML. Artikel ini juga memberikan informasi tentang cara mengubah parameter gambar dan mengatur pembungkusan teks di sekitar gambar.

Pertama, tentang menyisipkan gambar. Ada satu untuk tujuan ini yang memiliki beberapa atribut. Yang utama adalah "src". Ini menyimpan alamat dari mana browser dapat menyisipkan gambar. Anda dapat menentukan jalur ke gambar yang sudah disimpan di komputer Anda, atau memberikan tautan ke sumber daya web.

Pasangan atribut penting berikutnya adalah “lebar” dan “tinggi”. Mereka digunakan untuk mengubah ukuran gambar secara manual (pilihan berguna untuk meregangkan dan mengompresi gambar).

Tag memiliki atribut seperti "alt" dan "title". Mereka mirip satu sama lain karena tujuannya adalah untuk mendeskripsikan gambar. Namun "judul" berisi teks yang ditampilkan saat Anda mengarahkan mouse ke atas gambar, dan nilai literal dari atribut "alt" ditampilkan jika gambar tidak dapat dimuat.

Ada beberapa atribut yang lebih spesifik yang terdapat di sebagian besar tag. Ini adalah "accesskey", "class", "id" dan "style". "Accesskey" menentukan dengan mana objek diakses. "Kelas" dan "id" adalah parameter terkait CSS. Mereka menjelaskan kelas mana yang dimiliki gambar tersebut (atau pengidentifikasinya). "Gaya" adalah atribut teks yang memungkinkan Anda menyetel gaya CSS bawaan pada gambar.

Salah satu parameter yang menentukan tampilan suatu gambar adalah “border”. Ini menentukan ketebalan batas di sekitar objek dan dapat ditentukan sebagai bilangan bulat positif (dalam piksel).

Atribut selanjutnya adalah "align". Ini menggambarkan bagaimana teks membungkus gambar. Parameter ini dapat mengambil nilai "bawah", "tengah", "kiri", "kanan" dan "atas". Setiap nilai menentukan di mana gambar akan ditempatkan relatif terhadap teks. Misalnya, dengan nilai "tengah" maka bagian tengah gambar akan sejajar dengan batas bawah teks, dan dengan "kiri" objek akan berada di sisi kiri teks. Tapi ini hanya satu cara untuk mengatur teks untuk membungkus gambar - HTML.

Ada alat canggih lainnya - CSS (jauh lebih serbaguna). Dengan bantuannya, Anda dapat mengatur atribut tag dengan lebih efisien, termasuk teks yang membungkus gambar. CSS memungkinkan Anda menentukan parameter tidak hanya objek tertentu, tetapi juga semua objek serupa. Misalnya, jika Anda ingin mengatur margin semua gambar dalam dokumen menjadi sepuluh piksel, maka Anda hanya perlu menyertakan file CSS dengan satu baris: “img ( margin: 10px 10px 10px 10px; )” (dalam praktiknya, kutipan tidak diperlukan!).

Dan teks yang membungkus gambar, misalnya, di sepanjang tepi kiri diatur seperti ini: “img ( align: left; )”.

Omong-omong, untuk menambahkan kode CSS Anda tidak perlu menuliskannya di file sama sekali. Untuk melakukan ini, HTML menyediakan tag “gaya” di mana Anda dapat memasukkan kode CSS. Tapi itu hanya akan berfungsi untuk dokumen ini (jika Anda perlu menambahkan kode yang sama ke beberapa file HTML, maka Anda harus membuat style sheet terpisah).

Sekarang Anda dapat "mencairkan" situs dengan gambar, memanfaatkan properti berguna dari tag yang bertanggung jawab untuk ini. Jangan ragu untuk mengubah ukuran atau membungkus teks di sekitar gambar. Halaman web tanpa komponen grafis adalah pemandangan yang membosankan, bukan?