CSS Float mõistmine

Kasutades CSS-i hõljuvat veebisaiti paigutusega vara

CSS-i vara on paigutuse jaoks väga oluline omadus. See võimaldab teil positsioneerida oma veebilehe disaini täpselt nii, nagu soovite, et seda kuvada, kuid selle kasutamiseks peate mõistma, kuidas see toimib.

CSS-i ujukinnisvara stiililehe näeb välja selline:

. paremale (float: parem; }

See ütleb brauserile, et kõike, mis on klassi "õige", peaks paremale liikuma.

Sa määraksid selle nii:

class = "right" />

Mida saab hõljuda CSS-i ujukinnisvara abil?

Sa ei saa ujutada kõiki veebisaidi elemente. Te saate hõljuda ainult ploki tasemel elemente. Need on elemendid, mis lehel asuvad ploki ruumis, nagu näiteks pildid (), lõiked (), jagunemised () ja loendid ().

Muid elemente, mis mõjutavad teksti, kuid ei loo selle lehe kasti, nimetatakse inline elementideks ja neid ei saa laiendada. Need on sellised elemendid nagu span (), rea vaheajad (), tugev rõhk () või kaldkirja ().

Kus nad ujuvad?

Võite ujutada elemente paremale või vasakule. Kõik ujutatud elemendist lähtuvad elemendid liiguvad ujutatud elemendi ümber teisel pool.

Näiteks, kui ma pilti vasakule liigutan, jookseb see kõik teksti või muud elemendid, mis järgivad seda, paremale. Ja kui ma parajasti pildil paremale liigutan, liigub see kõik teksti või muud elemendid, mis järgivad seda, vasakule. Kuid pilt, mis on asetatud teksti blokeerimisse ilma selleta rakendatud ujukindluse, kuvatakse, kuid brauser on seatud piltide kuvamiseks.

See on tavaliselt pildi allservas kuvatava teksti järgmine esimene rida.

Kui kaugele nad ujuvad?

Ujutatud element liigub nii palju kui võimalik konteineri elemendi vasakule või paremale. Selle tulemuseks on mitmed erinevad olukorrad sõltuvalt sellest, kuidas teie kood on kirjutatud.

Nende näidete korral liigun vasakule väikese DIV elemendi:

Fotograafia kujunduse loomiseks võite isegi kasutada ujukaid. Iga pisipilt (see sobib kõige paremini, kui need on kõik sama suurusega) panete DIV-i pealdisega ja hõlbustavad DIV elemente konteineris.

Ükskõik kui kauakestes on brauseri aken, pisipildid joonduvad ühtlaselt.

Float välja lülitamine

Kui olete teadnud, kuidas elemendi ujuvaks saada, on oluline teada, kuidas ujukpi välja lülitada. Uue välja lülitate CSS-i selge vara abil. Saate kustutada vasakule ujukaid, hõljumite või mõlemaid:

selge: vasakule;
selge: parem;
selge: mõlemad;

Kõik elemendid, mille jaoks olete määranud selge vara , kuvatakse selle suuna all oleva elemendi all. Näiteks selles näites teksti kaks esimest lõiku ei kustutata, kuid kolmas on.

Erinevate paigutusefektide saamiseks mängi oma dokumentide erinevate elementide selge väärtusega.

Üheks kõige huvitavamaks ujutatud paigutuseks on piltide rida, mis asuvad paremal või vasakul veerus teksti lõikudel. Isegi kui tekst ei ole pildi möödumiseks piisavalt pikk, võite kasutada kõigi piltide kustutamist, et veenduda, et need kuvatakse veergu, mitte eelmise pildi kõrval.

HTML (korrata seda lõiku):


Mõlemad auhinnad on ebaõnnestumatud, kuna need on aegunud ja lõdvestunud. Cupidatat mitte proident, ut labore et dolore magna aliqua.

CSS (vasakule jäävate piltide hõljumine):

img.float {ujuk: vasak;
selge: vasakule;
marginaal: 5px;
}

Ja paremal:

img.float {float: parem;
selge: parem;
marginaal: 5px;
}

Planeeringute kasutamine paigutuse jaoks

Kui mõistate, kuidas ujuv vara töötab, võite hakata seda oma veebisaitide väljapanekuks kasutama. Need on sammud, mida ma võin ujutatud veebilehe loomiseks:

Niikaua kui teate oma paigutusjaotiste laiuseid (protsendid on korras), saate kasutada ujukompositsiooni, et need paigutada lehele. Ja kena asi, ei pea muretsema nii, et kasti mudel oleks Internet Exploreri või Firefoxi jaoks erinev.