CSS: Innpakningselementer. Hvordan lage html-tekstomslag rundt et bilde

Alle HTML-elementer på en nettside er ordnet i en felles flyt, fra topp til bunn (for blokkelementer) og fra venstre til høyre (for innebygde elementer). Denne visningsmetoden er ikke særlig effektiv, men takket være CSS er det mulig å endre designet til det bedre.

Flytende elementer

Når du definerer et flytende element, må du plassere det i kode rett under elementet du vil at det skal flyte under; alt annet innhold plassert i koden under det flytende elementet vil flyte rundt det på nettsiden. La oss se nærmere på hvordan nettlesere laster inn flytende elementer og annet innhold på en nettside.

Først laster nettleseren elementer inn på siden i normal rekkefølge, beveger seg fra topp til bunn, når den møter et flytende element, plasserer den det på den angitte siden. Nettleseren ekskluderer dette elementet fra den generelle flyten, og som et resultat "flyter" det på siden.

Siden det flytende elementet ble ekskludert fra den generelle flyten, blir de gjenværende blokkelementene som ligger i koden etter den, lastet inn på siden som om dette elementet ikke var der. Merk at blokkelementene er plassert under det flytende elementet, dette er fordi det flytende elementet ikke lenger er en del av den samlede flyten.

Hvis du ser nøye på figuren, vil du se at, i motsetning til blokkelementer, når du plasserer inline eller ren tekst plassert inne i et blokkelement, respekteres grensene til det flytende elementet, så innebygde elementer og tekst flyter rundt.

Husk at du kan plassere flere flytende elementer på én rad hvis bredden på det overordnede elementet tillater det.

Merk: Absolutte og fast posisjonerte elementer ignorerer flyteegenskapen.

Ved bruk av CSS-egenskaper og flytebildet ble laget for å flyte på venstre side. Teksten som ligger i HTML-koden under bildet vil vikle rundt bildet langs høyre og nederste side.

For å skape tomrom mellom et bilde og teksten som går rundt det, må du legge til utfylling i bildet. Siden bildet er forskjøvet til venstre kant av det overordnede elementet, vil det være nok å legge til marginer bare til høyre og under, for å flytte teksten litt bort fra den:

Img ( flytende: venstre; marg: 0 10px 10px 0; ) Prøv »

Avbryt Wrap

Noen ganger vil du vise et element slik at det ikke påvirkes av flytende elementer foran det. Et slikt element kan for eksempel være bunnteksten, som uansett skal vises under alle andre elementer på siden. Hvis siden din har høy sidefelt plassert på venstre kant av nettsiden, kan bunnteksten stige opp og vises til høyre for den. Så i stedet for å være plassert på siden, vises bunntekstinnholdet i flukt med sidefeltet. Dette problemet Dette løses ved å bruke clear-egenskapen, som forteller nettleseren at elementet som styles ikke skal pakkes rundt det flytende elementet.

CSS clear-egenskapen kan settes til en av følgende verdier:

• venstre - flytende elementer er ikke tillatt på venstre side.
• høyre - flytende elementer er ikke tillatt høyre side.
• begge - flytende elementer er forbudt på begge sider.
• ingen - tillater flytende elementer på begge sider.

Egenskapen clear spesifiserer at flytende elementer ikke er tillatt på høyre side. Tekst plassert under bildet vil ikke vikle rundt venstre kant av bildet.

CSS flyte lar deg gjøre HTML-menyen, plasser blokker, juster bilder

Hvis du ikke forstår så godt hvordan det fungerer innpakning i HTML og CSS(float property), så vil dette notatet hjelpe deg med å navigere. CSS-float-egenskapen brukes ofte til å plassere to eller flere bokser på én linje. Øverste del av disse blokkene er på samme nivå, den nederste avhenger av høyden på blokkene. Selve blokkene "flyter" til venstre ( flyte: venstre) eller høyre ( flyte: høyre). Det er også en verdi på ingen, den deaktiverer innpakning (flytoperasjon) for spesifikt element med flyte: ingen

Egenskapen brukes også ved justering av bilder.

Vikle tekst rundt et bilde

Funksjoner ved innpakning i CSS

En "sideeffekt" oppstår hvis et bilde justert på hver side har stor størrelse og er plassert i bunnen av blokken der den er justert. I dette tilfellet kan påfølgende blokkelementer også samhandle.

En annen funksjon er tap av høyde av det overordnede elementet. Når høyden på foreldreblokken bestemmes av innholdet, og det er flytende elementer inni, så "glemmer" forelderen høyden på de indre (de fløt bort!). Resultatet er en skjult kantlinje for det overordnede HTML-elementet

Pakk ut i HTML og CSS clear

Du kan unngå problemene beskrevet ovenfor ved å spesifisere et blokkelement med CSS-egenskapen klar bak de flytende elementene. Denne egenskapen overstyrer effekten av float på elementer som følger float. Det kan div blokk, eller et annet element eller pseudo-element med verdien clear:left (andre verdier er klare: høyre eller klare: begge), hvis vi ønsker å avbryte effekten av et element som flyter til venstre.

Innpakning kanselleres ved å bruke clear CSS-egenskapen.

Horisontal meny

Ved å bruke innpakning kan du lage horisontal meny. For å gjøre dette må du søke flyte: venstre til elementer li. I dette tilfellet tar elementene horisontal posisjon, det gjenstår bare å sette inn lenkene. Dette er ikke den eneste måten; en lignende meny kan også opprettes gjennom flere hyperkoblinger på rad, ved å bruke egenskapen display: inline-block eller display:tabell og andre.

For å lære mer om flytende i CSS, se dokumentasjonssiden for CSS-float. Den samme siden beskriver CSS-boksmodellen i detalj.

Bruken av bilder på en html-side er alltid mer informativ og visuell sammenlignet med solid tekst.

Det er mulig å sette inn et bilde i html-tekst på flere måter, og i klassikerne av disse metodene er det 3:

• sentrering av bildet
• vikle tekst rundt et bilde
• plassere et bilde i et felt

Justere bildet til midten

For å justere et bilde til midten av en tekstkolonne, er den enkleste måten å bruke taggen plasser i container

som align="center"-attributtet er satt for. Hvis forventet hyppig bruk bilder, da blir det mer optimalt bruke CSS stil for taggen

Hvordan dette implementeres, se eksempel 1.

Eksempel 1: Justere et bilde til midten

I dette eksemplet, til beholderen

Vi legger til en CSS-klasse cimg, som setter justeringen til midten av linjen. Hvordan dette vil se skjematisk ut er vist i figur 1.

Ris. 1. Tegning i midten av tekstkolonnen

Vikle tekst rundt et bilde

Å pakke tekst rundt et bilde er en av de vanligste metodene for HTML-sidelayout, som lar deg effektivt bruke alle ledig plass. populære teknikker for layout av nettsider, når bildet er plassert langs kanten av nettleservinduet, og teksten går rundt det på de andre sidene (fig. 2). For å tilpasse tekstbryting rundt et bilde, kan du bruke flere metoder basert på både HTML og CSS.

Ris. 2. Bildet er justert til venstre kant av siden og er omgitt av tekst til høyre.

For å vikle tekst rundt et bilde ved hjelp av ved hjelp av HTML du må huske at taggen Det er et align-attributt, som bestemmer justeringen av bildet i dokumentet og samtidig spesifiserer hvordan teksten skal pakkes rundt bildet. For å justere bildet til høyre og sette teksten til å bryte til venstre, må du bruke align="right", for å justere til venstre og bryte teksten til høyre, bruk align="left". Det er også nyttig å bruke tag-attributter her - vspace og hspace, som indikerer i hvilken avstand teksten vil flyte rundt bildet vertikalt og horisontalt. Uten å spesifisere disse attributtene, vil teksten være tett ved siden av bildet (eksempel 2).

Eksempel 2: Vikle tekst rundt et bilde med ved hjelp av HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

For å konfigurere bildebryting ved hjelp av CSS-stiler Vi vil bruke flyteregelen. float:right justerer bildet til høyre kant av dokumentet og bryter tekst til venstre, mens float:left justerer bildet til venstre kant av dokumentet og bryter tekst til høyre for bildet (eksempel 3).

Eksempel 3: Vikle tekst rundt et bilde med bruker CSS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Her for å tagge cimg-klassen legges til, som har høyrejusteringen satt til float:right, og venstre og bunnen av bildet er satt av egenskapene padding-left:10px og padding-bottom:10px.

Bilde på feltet

Med dette formatet for å plassere et bilde i et dokument, flyter bildet rundt bare én side. Denne plasseringsmetoden ligner en to-kolonne struktur, der et bilde er plassert i en kolonne og tekst i den andre.

Med dette opplegget er bildet plassert til høyre eller venstre for teksten, og det flyter rundt bare på den ene siden. Faktisk ligner den to kolonner, hvorav den ene inneholder en tegning, og den andre inneholder tekst (Figur 3).

Ris. 3. Plasser bildet i feltet til venstre for teksten

Jeg kjenner to måter å lage en lignende struktur på - ved å bruke HTML-koder

Tabeller: denne metoden er praktisk fordi den lar deg enkelt og tydelig organisere en søylestruktur ved hjelp av celler. Denne metoden er gammeldags og bruken er ikke spesielt velkommen i moderne webdesign. Det antas at denne metoden er overflødig og vanskelig å redigere. Men alle nykommere går gjennom det. For en slik struktur trenger vi en tabell med tre kolonner, den første kolonnen vil inneholde selve bildet, den tredje vil inneholde teksten, og mellom dem vil vi indikere innrykk - i den andre kolonnen. Du kan klare deg med to kolonner, og spesifisere innrykk ved å bruke CSS-stiler eller ved å bruke width-attributtet til taggen (eksempel 4).

Eksempel 4: Plassere et bilde på et felt ved hjelp av tabeller

Pinnsvin er beskyttet mot ytre aggresjon av et stikkende skall, som sparer dem fra de som vil tjene på det smakfulle og møre pinnsvinkjøttet. Men dette dyret bør ikke betraktes som helt ufarlig, det er tross alt et rovdyr. Ja, han lever ikke av ulv og rever, men bare fordi han er dårligere enn dem i størrelse. Men han er ganske i stand til å spise en orm eller til og med en slange.

resultatet er vist i figur 4.

Ris. 4. Bilde i feltet til venstre for teksten

I eksempel 4 er bredden på bildet 90 piksler, og bredden på kolonnen der det er plassert er 110 piksler. Forskjellen mellom dem gir oss den nødvendige innrykk fra teksten til bildet. For å forhindre at tabellattributtene celleavstand og cellefylling forstyrrer prosessen, er det bedre å tilbakestille verdiene til null. Vær oppmerksom på at høydejusteringen av cellene er vertikaljustert: topp.

CSS-stiler: Dette eksemplet er mer å foretrekke og optimalt. Her trenger vi to lag

, parametrene vi vil spesifisere via CSS. Ett lag vil inneholde bildet og det andre vil inneholde tekst. Hvordan dette fungerer, se eksempel 5:

Eksempel 5. Plassering av et bilde på et felt med lag og CSS-stiler

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<kode > <html > <hodet > <meta http-equiv = "Innholdstype" innhold = "tekst/html; charset=utf-8" > <tittel > Tegning på feltet</tittel> <stiltype = "tekst/css" > </stil> </hode> <kroppen > <div id = "bilde" > <img src = "images/igels.png" width = "90" høyde = "78" alt = "Du vil ikke tro det, men det er et pinnsvin"> </div> <div id = "tekst" > Pinnsvin er beskyttet mot ytre aggresjon av et stikkende skall, som sparer dem fra de som vil tjene på det smakfulle og møre pinnsvinkjøttet. Men dette dyret bør ikke betraktes som helt ufarlig, det er tross alt et rovdyr. Ja, han lever ikke av ulv og rever, men bare fordi han er dårligere enn dem i størrelse. Men han er ganske i stand til å spise en orm eller til og med en slange.</div> </body> </html>

Pinnsvin er beskyttet mot ytre aggresjon av et stikkende skall, som sparer dem fra de som vil tjene på det smakfulle og møre pinnsvinkjøttet. Men dette dyret bør ikke betraktes som helt ufarlig, det er tross alt et rovdyr. Ja, han lever ikke av ulv og rever, men bare fordi han er dårligere enn dem i størrelse. Men han er ganske i stand til å spise en orm eller til og med en slange.

Float:left-egenskapen for #pic-laget er nødvendig for å angi at bildet skal være ved siden av venstre kant av dokumentet, og at den øverste tekstlinjen skal sammenfalle med øverste linje Bilder. Uten denne egenskapen faller #tekstlaget ned til høyden på bildet. For #tekstlaget angir du også venstre marg margin-left:110px i en avstand på 110 piksler, slik at teksten der ikke overlapper bildet. Hvis bildet må plasseres i høyre marg, spesifiser float:right for #pic og margin-right:110px for #tekst.

P.S.: I henhold til HTML4-spesifikasjonen må bilder plasseres inne i blokkelementer som div eller p.

Hvordan vikle tekst rundt et bilde i HTML og CSS - 4,4 av 5 basert på 16 stemmer

I dag brukes bilder nesten overalt på Internett. Det er umulig å forestille seg en nettside uten et bilde. Bilder vekker oppmerksomhet og blir bedre utseende og tekstoppfatning. Derfor i denne leksjonen vi skal lære hvordan du plasserer bilder i forhold til tekst og ser på hvordan vi legger tekst rundt et bilde i HTML, samt når CSS-hjelp egenskaper og verdier.

Vikle tekst rundt et bilde ved hjelp av HTML

Den enkleste måten å plassere et bilde på en side på er å bruke HTML-verktøy. Men denne metoden, sammenlignet med CSS-funksjoner det er en ulempe, det er ikke mulig å sette en margin mellom bildet og teksten, men du kan bare få teksten til å flyte rundt bildet.

La oss se på alt i rekkefølge. For å sette inn et bilde på en HTML-side, bruk img-taggen; for flere detaljer, se leksjonen om hvordan du setter inn bilder i HTML:. Derfor, for å sette inn et bilde i teksten HTML-sider, bare skriv følgende i koden:

Hvor foto.jpg er relativ vei til bildet..jpg

U img tag Det er et align-attributt, som bestemmer på hvilken kant bildet skal plasseres og på hvilken kant teksten vil flyte rundt det (for eksempel align="left" langs venstre kant). Justeringsattributtet har følgende betydninger:

• venstre - bildet vil bli plassert på venstre kant, og teksten vil flyte rundt det til høyre;
• høyre - bildet vil være plassert til høyre, og teksten vil flyte rundt det til venstre;
• bunn - ansvarlig for vertikal justering, i dette tilfellet vil bildet være til venstre, og Nedre del bilder mot den første tekstlinjen, dette er standard;
• topp - det samme som forrige verdi, bare tekstlinjen vil være plassert langs den øverste kanten av bildet;
• midt - kl gitt verdi Midten av bildet er justert til grunnlinjen til linjen.

La oss nå se på hvert element i praksis.

1. Som jeg allerede har nevnt, er bildet som standard satt til bootom, dvs. uavhengig av om vi setter det eller ikke, vil bildet vårt i forhold til teksten bli plassert slik:

2. For å justere bildet til venstre, og teksten flyter rundt det til høyre, må du skrive følgende:

3. For å justere bildet til høyre, må du skrive tilsvarende:

4. La oss nå se på vertikal justering. Hvis du bruker den øverste verdien, vil den første tekstlinjen være plassert mot den øverste kanten av bildet.

5. Juster teksten til midten av bildet. Denne teknikken Den er veldig god å bruke hvis du trenger å plassere et lite bilde i midten av linjen.

Bryt tekst rundt et bilde ved hjelp av CSS-egenskaper

Faktisk er de eksemplene på å lage tekstbryting og bildeplassering som vi diskuterte ovenfor, litt utdaterte; nå er det vanlig å gjøre alle elementer ansvarlige for utseendet til siden ved å bruke CSS-egenskaper og -verdier.

La oss se på et enkelt eksempel på hvordan du får tekst til å vikle rundt et bilde, når bildet er plassert på venstre kant og teksten flyter rundt det til høyre. Samtidig vil vi sette visse innrykk mellom teksten og bildet.

Først må vi tilordne en bestemt klasse til bildet vårt, her kan du bruke hvilket som helst ord, det viktigste er at du forstår nøyaktig hva denne klassen er ansvarlig for i utformingen av siden din. Dette gjøres slik:

Nå må leftfoto-klassen få noen CSS-stiler.

Venstrefoto( float:venstre; marg: 4px 10px 2px 0px; )

Denne koden plasseres mellom taggene ..., vedlagt i tagger eller plassert i ekstern fil CSS-stiler.

La oss se på elementene vi angir her:

• flyte:venstre; - vi plasserte bildet til venstre og fikk teksten til å flyte rundt bildet til høyre, dette er i hovedsak det samme som align="left"-attributtet.
• margin: 4px 10px 2px 0px; - vi setter de ytre margene, 4px fra toppen, 10px fra høyre, 2px fra bunnen og 0px fra venstre i bildet.

Oppgave

Legg til et bilde på siden slik at det er viklet rundt den tilstøtende teksten.

Løsning

Å pakke tekst rundt et bilde brukes vanligvis for å kompakt ordne materiale og koble illustrasjoner og tekst sammen. Selve flottøren opprettes ved å bruke flytestilegenskapen lagt til IMG-velgeren. Den venstre verdien justerer bildet til venstre, høyre - til høyre. I dette tilfellet skjer strømmen langs de andre, frie sidene.

Eksempel 1. Pakning rundt bilder

HTML5 CSS 2.1 IE Cr Op Sa Fx

Rapport fra løytnant Bokatuev

I går, under en rekognoseringsaksjon, ble vår gruppe angrepet av en ukjent fiende i Alien-kamuflasjeuniform. Som et resultat av effektivt forsvar og et raskt motangrep ble en stor gruppe militante knust og kastet tilbake. Det er ingen personskader blant personellet. Jagerne fra rekognoseringsgruppen viste bemerkelsesverdige ferdigheter i bruk av våpen. Spesielt utmerket i kamp var pelotonsleder M.A. Kudryashev, som klokt brukte de menneskelige ressursene til pelotonen sin. Som et resultat av operasjonen ble elementer av utenomjordisk kultur fanget og overført til den analytiske gruppen.

Pressemelding fra analysegruppen

Psykotropiske våpen ble utviklet i våre hemmelige laboratorier som en del av Project Pandora. Som et resultat av et mislykket eksperiment ble de fleste av forskerne som jobbet på enheten utsatt for psykotropisk stråling, og de tok i en lidenskapelig tilstand prototypen fra hverandre. Kanskje er forskerne våre fortsatt i en lidenskapstilstand.

Resultat dette eksemplet vist i fig. 1.

Ris. 1. Tekst med illustrasjoner

Bruk av float-egenskapen tvinger teksten til å passe tett inn i bildet. Derfor introduserte vi i eksemplet det universelle margin eiendom, som legger til polstring mellom bildet og teksten. Denne egenskapen setter samtidig innrykk på toppen, høyre, bunn og venstre av bildene.