Ngagunakeun Harta CSS ngambang mendesain Web Page Layouts
Harta CSS mangrupakeun sipat pohara penting pikeun perenah. Eta ngidinan Anjeun pikeun posisi desain kaca web Anjeun persis sakumaha rék aranjeunna pikeun nembongkeun-tapi dina urutan ngagunakeun eta maneh kudu ngarti kumaha gawéna.
Dina gaya lambar, harta CSS ngambang Sigana mah ieu:
.right {ngambang: katuhu; }
Ieu ngabejaan browser nu sagalana jeung kelas "katuhu" kudu floated ka katuhu.
Anjeun bakal napelkeun deui kawas kieu:
kelas = "katuhu" />
Naon Tiasa Anjeun ngambang jeung CSS ngambang Harta?
Anjeun teu bisa ngambang unggal unsur dina kaca web. Anjeun ngan bisa ngambang block-tingkat elemen. Di handap ieu mangrupakeun elemen nu nyandak up a blok spasi dina kaca, kawas gambar (), ayat (), bagean (), sarta béréndélan ().
Elemen séjén anu mangaruhan téks, tapi ulah nyieun kotak dina kaca disebut elemen inline teu bisa floated. Di handap ieu mangrupakeun elemen kawas bentang (), ngarecah garis (), tekenan kuat (), atawa miring ().
Dimana Ulah Aranjeunna ngambang?
Anjeun tiasa ngambang elemen ka katuhu atawa kénca. Sagala unsur nu kieu unsur floated bakal ngalir sabudeureun unsur floated dina sisi séjén.
Contona, upami kuring ngambang hiji gambar ka kénca, sagala téks atanapi elemen séjén handap éta bakal ngalir sabudeureun ka katuhu. Tur upami kuring ngambang hiji gambar ka katuhu, mana tulisan atawa elemen séjén handap éta bakal ngalir sabudeureun ka kénca. Hiji gambar nu ieu disimpen dina blok tulisan tanpa gaya ngambang dilarapkeun ka dinya bakal nembongkeun kumaha browser tos disetel pikeun nembongkeun gambar.
Ieu biasana mibanda garis mimiti handap téks ditampilkeun di handap gambar.
Kumaha Jauh Badé Aranjeunna ngambang?
Unsur anu geus floated baris mindahkeun sajauh ka kénca atawa ka katuhu tina unsur wadahna jadi mémang. Ieu ngakibatkeun sababaraha kaayaan béda gumantung kana kumaha kode anjeun ditulis.
Pikeun conto ieu, abdi bakal ngambang unsur DIV leutik ka kénca:
- Mun unsur floated teu boga rubak pre-tangtu, eta bakal butuh nepi salaku loba spasi horizontal sakumaha diperlukeun na sadia, paduli ngambang dina. Catetan: sababaraha panyungsi nyobian nempatkeun elemen gigireun floated elemen nalika lebar henteu diartikeun-biasana méré unsur non-floated ukur jumlah leutik spasi. Jadi Anjeun kudu salawasna nangtukeun rubak on elemen floated.
- Mun unsur wadahna ngarupakeun unsur HTML, anu floated DIV bakal linggih dina margin kénca kaca.
- Mun unsur wadahna geus sorangan ngandung ku hal sejenna, anu floated DIV bakal linggih dina margin ditinggalkeun tina wadahna.
- Anjeun tiasa sayang floated elemen, sarta nu bisa hasil dina ngambang tungtung nepi di hiji tempat héran. Contona, ngambang ieu téh kénca floated DIV jero hiji DIV katuhu floated.
- elemen Floated bakal diuk gigireun silih lamun aya kamar dina wadah. Contona, wadahna ieu boga tilu 100px elemen DIV lega floated dina wadah lega 400px.
Anjeun malah bisa make floats nyieun perenah galeri poto. Anjeun tiasa nyimpen unggal gambar leutik (gawéna pangalusna lamun aranjeunna sadayana ukuran sarua) dina DIV jeung caption tur ngambang di unsur DIV dina wadah.
Perkara teu sabaraha lega jandéla browser is, gambar leutik bakal baris nepi seragam.
Ngaktipkeun Pareum ngambang dina
Sakali anjeun terang kumaha carana meunang unsur keur ngambang, éta penting uninga kumaha mareuman ngambang dina. Anjeun mareuman ngambang jeung CSS sipat jelas. Anjeun tiasa mupus floats ditinggalkeun, floats katuhu atawa duanana:
jelas: ditinggalkeun;
jelas: katuhu;
jelas: duanana;
Sagala unsur nu nangtukeun sipat jelas keur baris muncul handap unsur anu floated arah éta. Contona, dina conto ieu dua paragraf mimiti téks teu diberesihan, tapi katilu kasebut.
Maén jeung nilai jelas unsur béda dina dokumén anjeun pikeun meunang épék perenah béda.
Salah sahiji layouts floated paling istiméwa mangrupa runtuyan gambar handap bener atawa kolom kénca gigireun ayat tina téks. Malah lamun téks teu cukup lila pikeun ngagulung kaliwat gambar, Anjeun tiasa nganggo jelas dina sagala gambar pikeun mastikeun yén maranéhna muncul dina kolom tinimbang gigireun gambar saméméhna.
HTML nu (ngulang ayat):
Duis aute séd irure dolor ulah eiusmod tempor incididunt di reprehenderit di voluptate. Cupidatat non proident, UT labore et dolore magna aliqua.
The CSS (pikeun ngambang gambar ka kénca):
img.float {ngambang: ditinggalkeun;
jelas: ditinggalkeun;
margin: 5px;
}
Jeung ka katuhu:
img.float {ngambang: katuhu;
jelas: katuhu;
margin: 5px;
}
Ngagunakeun Floats pikeun Layout
Sakali anjeun ngartos kumaha harta ngambang jalan, anjeun tiasa mimitian nganggo ka iklas kaluar kaca web Anjeun. Di handap ieu mangrupakeun hambalan I nyandak nyieun kaca web floated:
- Ngarancang tata perenah (dina kertas atawa dina alat grafik atawa di sirah kuring).
- Nangtukeun mana babagian kaca bade janten.
- Nangtukeun lebaran tina rupa peti jeung elemen dina aranjeunna.
- Ngambang sagalana. Malah unsur wadahna pangluarna ieu floated ka kénca supados abdi terang dimana eta bakal dina hubungan pintonan browser port.
Salami anjeun terang lebaran (percentages anu halus) tina bagian perenah anjeun, anjeun tiasa nganggo harta ngambang nempatkeun éta tempat aranjeunna milik dina kaca. Jeung hal nice nyaeta, Anjeun teu kudu salempang salaku loba ngeunaan modél kotak keur béda pikeun Internet Explorer atawa Firefox.