Uzante la CSS flotan Proprietonon por Desegni Retpaĝajn Paĝojn
La CSS-posedaĵo estas tre grava posedaĵo por aranĝo. Ĝi permesas al vi posicioni vian retpaĝajn dezajnojn ĝuste kiel vi volas montri ilin, sed por uzi ĝin vi devas kompreni, kiel ĝi funkcias.
En stila folio, la CSS-kalendejaĵo aspektas kiel ĉi:
.right {float: dekstra; }
Ĉi tio rakontas al la retumilo ke ĉio kun la klaso de "dekstra" devus esti flosita dekstre.
Vi donus ĝin kiel ĉi tion:
klaso = "dekstra" />
Kion Povas Vin Flosi kun la CSS flosanta Nemoveblaĵo?
Vi ne povas flosi ĉiun elementon en retpaĝaro. Vi povas nur flosi blok-nivelajn elementojn. Ĉi tiuj estas la elementoj, kiuj prenas blokon de spaco en la paĝo, kiel bildoj (), alineoj (), dividoj (), kaj listoj ().
Aliaj elementoj, kiuj tuŝas tekston, sed ne kreas skatolon en la paĝo nomiĝas inlineaj elementoj kaj ne povas esti flositaj. Ĉi tiuj estas elementoj kiel span (), lineaj rompoj (), forta emfazo (), aŭ kursivoj ().
Kie Do Ili Flosas?
Vi povas flosi elementojn dekstren aŭ maldekstren. Ajna elemento kiu sekvas la flosan elementon fluos ĉirkaŭ la flosita elemento sur la alia flanko.
Ekzemple, se mi flosas bildon maldekstre, ajna teksto aŭ aliaj elementoj sekvantaj ĝin fluos ĉirkaŭ ĝi dekstre. Kaj se mi flosas bildon dekstre, ajna teksto aŭ aliaj elementoj sekvantaj ĝin fluos ĉirkaŭ ĝi maldekstre. Imago, kiu lokas en bloko de teksto sen ia ajn flosata stilo, aplikata al ĝi montros, tamen la retumilo estas montrita por montri bildojn.
Ĉi tio kutime estas kun la unua linio de sekva teksto montrita ĉe la fundo de la bildo.
Kiom Frue Ili Flosos?
Elemento kiu flosis movos tiel maldekstre aŭ dekstre de la ujo elemento kiel ĝi povas. Ĉi tio rezultas en diversaj malsamaj situacioj laŭ via skribo.
Por ĉi tiuj ekzemploj, mi flosos malgrandan DIV-elementon maldekstre:
- Se la flosita elemento ne havas antaŭdifinitan larĝecon, ĝi prenos tiom multe da horizontala spaco laŭeble kaj disponebla, sendepende de la kaleŝego. Noto: iuj retumiloj provas meti elementojn apud flosaj elementoj kiam la larĝo ne estas difinita - kutime donante la ne-flotan elementon nur malgrandan spacon. Do vi ĉiam devas difini larĝecon sur flositaj elementoj.
- Se la ujo elemento estas la HTML-elemento, la flosita DIV sidos sur la maldekstra rando de la paĝo.
- Se la ujo estas enhavita de io alia, la flosita DIV sidos sur la maldekstra rando de la ujo.
- Vi povas nestumi flositajn elementojn, kaj tio povas rezultigi la kaleŝegon finiĝantan en mirinda loko. Ekzemple, ĉi tiu kaleŝego estas maldekstra flosita DIV ene de dekstra flosita DIV.
- Flositaj elementoj sidiĝos unu al la alia, se estas ĉambro en la ujo. Ekzemple, ĉi tiu ujo havas tri 100px larĝajn DIV-elementojn flositajn en 400px larĝa ujo.
Vi povas eĉ uzi flosojn por krei foton-galerio. Vi metas ĉiun bildeton (ĝi funkcias plej bone kiam ili estas ĉiuj samaj) en DIV kun la subskribo kaj flosas la DIV-elementojn en la ujo.
Ne gravas kiom larĝe la retumilo estas, la bildetojn vicos uniforme.
Turnante ekstere la floson
Unufoje vi scias kiel akiri elementon por flosi, gravas scii kiel malŝalti la kaleŝegon. Vi malŝaltas la kaleŝegon kun la klara propraĵo de CSS. Vi povas liberigi maldekstrajn flosojn, dekstrajn flotojn aŭ ambaŭ:
klara: maldekstre;
klara: dekstra;
klara: ambaŭ;
Ajna elemento, kiun vi difinis la klaran proprieton , aperos sub elemento, kiu flosas tiun direkton. Ekzemple, en ĉi tiu ekzemplo la unuaj du alineoj de teksto ne estas liberigitaj, sed la tria estas.
Ludu kun la klara valoro de malsamaj elementoj en viaj dokumentoj por akiri malsamajn aranĝajn efikojn.
Unu el la plej interesaj flosaj planoj estas serio de bildoj malsupren dekstre aŭ maldekstre kolumno apud alineoj de teksto. Eĉ se la teksto ne daŭras sufiĉe longe por movi la bildon, vi povas uzi klare sur ĉiuj bildoj por certigi, ke ili aperas en la kolumno prefere ol apud la antaŭa bildo.
La HTML (ripeti ĉi tiun alineon):
Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat ne proidenta, por labori kaj dolore granda.
La CSS (por flosi la bildojn maldekstre):
img.float {flosas: maldekstre;
klara: maldekstre;
rando: 5px;
}
Kaj dekstre:
img.float {flosas: dekstra;
klara: dekstra;
rando: 5px;
}
Uzanta flotojn por Aranĝo
Unufoje vi komprenas, kiel funkcias la kaleŝejaĵo, vi povas uzi ĝin por elsendi viajn retpaĝojn. Jen la paŝoj, kiujn mi bezonas por krei flositan retpaĝon:
- Desegni la aranĝon (sur papero aŭ en grafika ilo aŭ en mia kapo).
- Determini, kie la paĝo dividiĝos.
- Determini la larĝojn de la diversaj ujoj kaj la elementoj ene de ili.
- Flosi ĉion. Eĉ la ekstrema ujo elemento flosas maldekstren tiel ke mi scias, kie ĝi estos rilate al la retumilo de la retumilo.
Dum vi scias, ke la larĝaj (procentoj estas bone) de viaj aranĝoj, vi povas uzi la flosatan posedaĵon por meti ilin, kie ili apartenas al la paĝo. Kaj la bela afero estas, vi ne devas zorgi pri la skatolo-modelo, kiu estas malsama por Interreto Explorer aŭ Firefox.