Hvordan å flyte en paragraf for HTML5 og CSS3 programmering - dummies

Stykker og andre blokknivåelementer har en veldefinert standardoppførsel i CSS3. De tar hele bredden på siden, og neste element vises nedenfor. Når du bruker elementet til et avsnitt, endrer ikke oppførselen til det aktuelle avsnittet mye, men oppførselen til etterfølgende avsnittene endres.

Begynn med å se på en side med tre avsnitt. Punkt 2 har sin flytegenskap satt til venstre.

Som du ser, skjer det en merkelig formatering her. Ta en titt på hva som skjer:

• Grenser er lagt til i avsnittene. Som du ser, er bredden på et element ikke alltid opplagt ved å se på innholdet. Når du sitter rundt med flyte, kan det være lurt å legge til grenser til avsnittene slik at du kan se hva som skjer. Du kan alltid fjerne grensene når du har det riktig.

• Første ledd virker normalt. Det første avsnittet har samme oppførsel som du ser i alle blokkelementer. Det tar hele bredden på siden, og det neste elementet blir plassert under det.

• Det andre avsnittet er ganske normalt. Det andre avsnittet har floatattributtet satt til venstre. Dette betyr at avsnittet vil bli plassert i sin normale posisjon, men den andre teksten vil bli plassert til høyre for dette elementet.

• Tredje avsnittet virker tynt. Det tredje avsnittet synes å omgir det andre, men teksten skyves til høyre. Float-parameteren i forrige avsnitt fører til at denne plasseres i et hvilket som helst gjenværende plass (som for øyeblikket ikke er mye). Resterende plass er til høyre og til slutt under andre ledd.

Koden for å produsere dette er enkel HTML med like enkelt CSS-oppslag:

floatDemo p {border: 2px black solid;}. floated {float: left;}

Float Demo
Stykke 1. Dette avsnittet har den normale oppførelsen til et blokknivåelement. Det tar opp hele bredden på siden, og det neste elementet er plassert under.
Paragraf 2. Dette avsnittet flyter til venstre. Den er plassert til venstre, og det neste elementet blir plassert til høyre for det.
Punkt 3. Dette avsnittet har ingen flytende, bredde eller margin. Det tar den plass det kan til høyre for det flytede elementet, og strømmer deretter til neste linje.

Som du kan se fra koden, er det en enkel klasse kalt floated med flyteegenskapen satt til venstre. Avsnittene er definert på vanlig måte. Selv om avsnitt 2 synes å være innebygd i punkt 3 i skjermbildet, viser koden klart at dette ikke er tilfelle.De to avsnittene er helt separate.