Uża s-CSS li jżommu l-Proprjetà tad-Disinni tad-Disinn tal-Web Page
Il-proprjetà CSS hija proprjetà importanti ħafna għat-tqassim. Dan jippermettilek tqiegħed id-disinji tal-paġna tal-web eżattament kif tixtieq li turihom - iżda sabiex tużaha għandek tifhem kif taħdem.
F'folja ta 'stil, il-proprjetà ta' float tas-CSS tidher bħal dan:
.right (float: right; }
Dan jgħidlek lill-browser li kollox mal-klassi ta '"dritt" għandu jkun imqiegħed fuq il-lemin.
Int tkun tassenjalha bħal dan:
klassi = "dritt" />
X'tista 'Tlaħħam mal-Proprjetà ta' float tas-CSS?
Inti ma tistax tikkontrolla kull element fuq paġna web. Tista 'biss tibdel l - elementi tal-blokka . Dawn huma l-elementi li jieħdu blokk ta 'spazju fuq il-paġna, bħal stampi (), paragrafi (), diviżjonijiet (), u listi ().
Elementi oħra li jaffettwaw it-test, imma ma joħolqux kaxxa fuq il-paġna jissejħu elementi inline u ma jistgħux jiġu varati. Dawn huma elementi bħal span (), line breaks (), enfasi qawwija (), jew korsiv ().
Fejn Do They Float?
Tista 'tikkontrolla l-elementi fuq il-lemin jew lejn ix-xellug. Kwalunkwe element li jsegwi l-element varjabbli se jiċċirkola madwar l-element imdawwar fuq in-naħa l-oħra.
Pereżempju, jekk nibboża immaġni fuq ix-xellug, kull test jew elementi oħra li jsegwu se jiċċirkolaw madwaru fuq il-lemin. U jekk nimbuttajt immaġni fuq il-lemin, kull test jew elementi oħra li jsegwu se jiċċirkolaw madwar ix-xellug. Immaġini li titqiegħed fi blokka ta 'test mingħajr stil ta' float applikata għaliha se turi madankollu l-browser huwa stabbilit biex juri immaġni.
Dan ġeneralment ikun bl-ewwel linja tat-test li ġej mur fuq il-qiegħ tal-immaġini.
Kemm se jmur 'il bogħod?
Element li ġie ċċattjat se jimxi sax-xellug jew il-lemin tal-element tal-kontejner kif jista '. Dan jirriżulta f'diversi sitwazzjonijiet differenti skond kif il-kodiċi tiegħek jinkiteb.
Għal dawn l-eżempji, ser inneħħi element DIV żgħir fuq ix-xellug:
- Jekk l-element varjabbli m'għandux wisa 'definita minn qabel, se jieħu kemm spazju orizzontali kif meħtieġ u disponibbli, irrispettivament mill-float. Nota: xi browsers jippruvaw iqiegħdu elementi ħdejn l-elementi floated meta l-wisa 'ma tkunx iddefinita - ġeneralment tagħti l-element mhux floated biss spazju żgħir ta' spazju. Allura għandek dejjem tiddefinixxi wisa ' fuq elementi varjabbli.
- Jekk l-element tal-kontejner huwa l-element HTML, id-DIV f'wiċċ l-ilma se joqgħod fuq il-marġni tax-xellug tal-paġna.
- Jekk l-element tal-kontejner fih innifsu jkun fih xi ħaġa oħra, id-DIV f'wiċċ l-ilma se joqgħod fuq il-marġni tax-xellug tal-kontenitur.
- Tista 'tiħżen l-elementi floati, u dan jista' jirriżulta fil-float li jispiċċa f'post sorprendenti. Per eżempju, dan il-float huwa xellug f'wiċċ l-ilma DIV ġewwa d-dritt imdawwar DIV.
- Elementi floati se joqogħdu ħdejn xulxin jekk ikun hemm spazju fil-kontenitur. Pereżempju, dan il-kontenitur għandu tliet elementi ta 'DIV wiesa' ta '100px imqiegħed f'kontenitur wiesgħa ta' 400px.
Tista 'saħansitra tuża s-sufruni biex toħloq tqassim ta' gallerija tar-ritratti. Inti tpoġġi kull thumbnail (taħdem aħjar meta tkun l-istess daqs) f'DIV bil-caption u l-float l-elementi DIV fil-kontenitur.
Ma jimpurtax kemm hu wiesa 't-tieqa tal-browser, it-thumbnails ser jingħaqdu b'mod uniformi.
Itfi l-Float
Ladarba tkun taf kif tikseb element li żżomm f'wiċċ l-ilma, huwa importanti li tkun taf kif itfi l-float. Inti itfi l-float mal-proprjetà ċara CSS. Tista 'ċara s-sufruni xellug, is-sufruni tajbin jew it-tnejn:
ċar: xellug;
ċar: dritt;
ċar: it-tnejn;
Kwalunkwe element li inti ssettja l- proprjetà ċara għal se jidher taħt element li huwa f'wiċċ l-ilma dik id-direzzjoni. Pereżempju, f'dan l-eżempju l-ewwel żewġ paragrafi tat-test mhumiex approvati, iżda t-tielet huwa.
Play bil-valur ċar ta 'elementi differenti fid-dokumenti tiegħek biex tikseb effetti ta' tqassim differenti.
Wieħed mit-taqsimiet l-aktar interessanti f'wiċċ l-ilma huwa serje ta 'immaġini' l isfel mill-kolonna tal-lemin jew tax-xellug li jmiss mal-paragrafi tat-test Anke jekk it-test ma jkunx twil biżżejjed biex tiskrollja l-immaġni ta 'qabel, tista' tuża ċara fuq l-immaġni kollha biex tiżgura li jidhru fil-kolonna minflok ma jmiss għall-immaġni ta 'qabel.
L-HTML (irrepeti dan il-paragrafu):
Duis auture irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labor u dolore magna aliqua.
Is-CSS (biex itfi l-immaġini fuq ix-xellug):
img.float {float: left;
ċar: xellug;
marġni: 5px;
}
U lejn il-lemin:
img.float {float: dritt;
ċar: dritt;
marġni: 5px;
}
Użu ta 'floats għat-Tqassim
Ladarba tifhem kif taħdem il-proprjetà float, tista 'tibda tużaha biex tfassal il-paġni tal-web tiegħek. Dawn huma l-passi li nieħu biex toħloq paġna web varjata:
- Iddisinja t-tqassim (fuq il-karta jew f'għodda grafika jew fir-ras tiegħi).
- Iddetermina fejn se jkunu d-diviżjonijiet tal-paġna.
- Iddetermina l-wisa 'tad-diversi kontenituri u l-elementi fi ħdanhom.
- Itfi kollox. Anke l-element ta 'kontenitur l-iktar imbiegħed huwa mdawwar fuq ix-xellug sabiex inkun naf fejn se jkun f'relazzjoni mal-port tal-vista tal-browser.
Sakemm taf il-wisa '(persentaġġi huma multa) tat-taqsim ta' tqassim tiegħek, tista 'tuża l-proprjetà float biex tpoġġihom fejn jappartjenu fuq il-paġna. U l-ħaġa sbieħ hija, m'għandekx għalfejn tinkwieta kemm dwar il-mudell tal-kaxxa li huwa differenti għall-Internet Explorer jew Firefox.