Izmantojot CSS peldošo īpašumu, lai izveidotu Web lapas izkārtojumus
CSS īpašums ir ļoti svarīgs izkārtojuma īpašums. Tas ļauj jums pozicionēt jūsu tīmekļa lapas dizainu tieši tā, kā vēlaties tos parādīt, bet, lai to izmantotu, jums ir jāsaprot, kā tā darbojas.
CSS peldošā īpašība stilu lapā izskatās šādi:
. labi (peldēt: pa labi; }
Tas norāda pārlūkprogrammai, ka viss ar "pareizo" klasi būtu jāpārvieto pa labi.
Jūs to piešķirtu šādi:
klase = "labi" />
Ko jūs varat peldēt ar CSS peldošu īpašumu?
Jūs nevarat peldēt katru elementu tīmekļa lapā. Jūs varat peldēt tikai bloku līmeņa elementus. Tie ir elementi, kas lappusē aizņem vietu bloku, piemēram, attēlus (), punktus (), sadalījumus () un sarakstus ().
Citi elementi, kas ietekmē tekstu, bet neveido lapu lodziņā, tiek saukti par inline elementiem, un to nevar pārplānot. Tie ir elementi, piemēram, span (), līnijas pārtraukumi (), spēcīgs uzsvars () vai kursīvā ().
Kur viņi peld
Jūs varat peldēt elementus pa labi vai pa kreisi. Jebkurš elements, kas seko peldētajam elementam, plūsīs ap peldošo elementu otrā pusē.
Piemēram, ja es peldošu attēlu pa kreisi, jebkurš teksts vai citi elementi pēc tā apritēs pa labi. Un, ja es peldošu attēlu pa labi, jebkurš teksts vai citi elementi pēc tā apritēs pa kreisi. Tiks parādīts attēls, kas ievietots teksta blokā bez tam piemērots float stila, taču pārlūkprogramma ir iestatīta, lai parādītu attēlus.
Tas parasti ir ar nākamās teksta rindiņu, kas ir redzama attēla apakšā.
Cik tālu viņi peld
Pievilcināts elements pārvietosies tālu pa kreisi vai pa labi no konteinera elementa, kā tas ir iespējams. Tas izraisa vairākas atšķirīgas situācijas atkarībā no tā, kā tiek rakstīts jūsu kods.
Šajos piemēros es kreisajā pusē peldošu nelielu DIV elementu:
- Ja peldētajam elementam nav iepriekš definēta platuma, tas aizņem tik daudz horizontālās vietas, cik nepieciešams un pieejams, neatkarīgi no pludiņa. Piezīme. Dažas pārlūkprogrammas mēģina ievietot elementus blakus peldētajiem elementiem, ja platums nav definēts - parasti peldošam elementam tiek piešķirts tikai mazs vietas apjoms. Tātad jums vienmēr vajadzētu noteikt platumu peldētajiem elementiem.
- Ja konteinera elements ir HTML elements, peldētais DIV tiks novietots lapas kreisajā malā.
- Ja konteinera elements pats par sevi ir ietverts kaut kas cits, pārpludināts DIV sēssies konteinera kreisajā malā.
- Jūs varat ievietot peldētus elementus, un tas var novest pie peldes, kas beidzas ar pārsteidzošu vietu. Piemēram, šis pludiņš ir kreisais peldētais DIV labajā peldētā DIV iekšpusē.
- Peldēti elementi sēdēs viens otram blakus, ja traukā ir telpa. Piemēram, šajā traukā ir trīs 100 pikseļu platuma DIV elementi, kas peldēti 400 pikserveida konteinerī.
Jūs varat pat izmantot pludiņus, lai izveidotu foto galerijas izkārtojumu. Jūs ievietojat katru sīktēlu (tas vislabāk darbojas, ja tas ir vienāds lielums) DIV ar parakstu un peldēt DIV elementus konteinerā.
Neatkarīgi no tā, cik platā ir pārlūkprogrammas logs, sīktēli sakrīt vienmērīgi.
Izslēgšana no pludiņa
Kad jūs zināt, kā iegūt elementu peldēt, ir svarīgi zināt, kā izslēgt pludiņu. Jūs izslēdzat pludiņu ar CSS dzēšanas īpašību. Jūs varat notīrīt kreiso plostu, labo pludiņu vai abus:
skaidrs: pa kreisi;
skaidrs: pa labi;
skaidrs: abas;
Jebkurš elements, kuru iestatījāt, lai parādītu skaidru īpašumu , parādās zem elementa, kas tiek peldēts šajā virzienā. Piemēram, šajā piemērā pirmie divi teksta punkti netiek notīrīti, bet trešais ir.
Atskaņojiet ar dažādu dokumentu elementu skaidru vērtību, lai iegūtu dažādus izkārtojuma efektus.
Viens no interesantajiem peldētajiem izkārtojumiem ir attēlu sērija, kas atrodas labajā vai kreisajā kolonnā blakus teksta punktiem. Pat ja teksts nav pietiekami ilgs, lai ritinātu pa attēlu, varat izmantot visu attēlu dzēšanu, lai pārliecinātos, ka tie parādās kolonnā, nevis blakus iepriekšējam attēlam.
HTML (atkārtojiet šo punktu):
Duis aute irure dolor sed ir eiusmod temporis incididunt reprehenderit in voluptate. Cupidatat ne proident, ut labore et dolore magna aliqua.
CSS (lai pārietu pa kreisi):
imgfloat {peldēt: pa kreisi;
skaidrs: pa kreisi;
starpība: 5 pikseļi;
}
Un pa labi:
img.float {peldēt: pa labi;
skaidrs: pa labi;
starpība: 5 pikseļi;
}
Izmantojot pludiņus izkārtojumam
Kad jūs saprotat, kā darbojas pludiņa īpašums, varat to sākt izmantot, lai izveidotu savas tīmekļa lapas. Šīs ir manas darbības, lai izveidotu peldētu tīmekļa lapu:
- Izstrādājiet izkārtojumu (uz papīra vai grafikas rīkā vai manā galvā).
- Nosakiet, kur būs lapas sadalīšana.
- Noteikt dažādu konteineru un elementu platumu.
- Peldēt visu. Pat visattālākais konteinera elements ir peldēts pa kreisi, lai es zinātu, kur tas būs saistībā ar pārlūka skata portu.
Kamēr jūs zināt, ka jūsu izkārtojuma sadaļās ir platumi (procenti ir labi), varat izmantot pludiņa īpašumu, lai tos ievietotu lapā, kur tie pieder. Un jauka lieta ir tā, jums nav jāuztraucas tik daudz par kastes modeli, kas atšķiras Internet Explorer vai Firefox.