Hvordan lage en flytende Div

December 8

Posisjonering div-elementer på et nettsted kan være utfordrende, spesielt hvis du ønsker å flyte divs til én side av en webside. Du kan finne denne typen posisjonering nyttig for å legge logoer til venstre på siden eller annonser til høyre. Cascading Style Sheets gjør dette mulig. Ved å lære å legge til CSS "flyte" egenskapene til dine div-elementer, kan du opprette strukturerte sidelayout som passer dine design behov.

Bruksanvisning

1 Start din HTML editor og åpne et HTML-dokument.

2 Lim inn følgende CSS-kode i dokumentet "<head>" -delen:

.floatLeft {float: left; height: 100px; width: 100px; margin: 5px; background-color: Gul;}

</ Style>

Den første CSS-klasse, kalt "floatLeft," inneholder en "float: left" eiendom. Dette fører til sideelementer som bruker klassen til å flyte til den venstre side av sin beholder. I dette tilfellet, er at beholderen websiden. Høyde og bredde egenskaper setter div dimensjoner. Den "margin: 5px" eiendom plasserer en 5-piksel margin rundt div. Dette er nyttig når du trenger å legge mellomrom mellom divs. Endre denne verdien fra "5" til så mange du vil. Større tall øke avstanden mellom divs. Bakgrunnen-fargen gjør rett og slett div bakgrunnsfarge gul. Dette hjelper deg å se divs under testing.

3 Legg til følgende CSS klassedefinisjoner under koden vist i forrige trinn:

.floatRight {float: right; height: 100px; width: 100px; margin: 5px; background-color: Gul;}

.clear {klar: begge;}

</ Style>

Den "floatRight" class forårsaker sideelementer som bruker denne klassen til å flyte til høyre side av beholderne. Legg merke til "klar" klasse. Denne klassen er nyttig for "clearing" en dupp. Det fører leseren til å plassere nye sideelementer på en ny linje i motsetning til å stable dem ved siden av hverandre. Du vil se dette i aksjon når du viser websiden.

4 Legg til følgende HTML-kode for å dokumentets "<body>" -delen:

<H1> Overskrift 1 fløt til venstre </ h1>

</ Div>

<H1> Overskrift 2 fløt til høyre </ h1>

</ Div>

Dette skaper divs som refererer til "floatLeft" og "floatRight" CSS-klasser. Nettleseren vil forankre den første div til venstre side av websiden og andre div til høyre.

5 Lim denne siste blokk med HTML-kode under kode som er oppført i det siste trinnet::

<H1> Overskrift 1 fløt til venstre </ h1>

</ Div>

<H1> Overskrift 2 fløt til venstre </ h1>

</ Div>

<H1> Overskrift 3 fløt til venstre </ h1>

</ Div>

Dette ia et avsnitt. Dette ia et avsnitt. Dette ia et avsnitt. Dette ia et avsnitt. Dette ia et avsnitt.

</ P>

Dette skaper tre div-elementer. Hver og en refererer til "floatLeft" CSS-klasse, forårsaker hver div å posisjonere seg rett til høyre for den foregående div. Disse typer oppsett er nyttig for å lage symmetriske skjermer som bildegallerier. Du kan for eksempel erstatte "<h1>" overskriften koder i hver div med "img" koder for å lage en rad med jevnt fordelte bilder,

Den endelige "<p>" tag skaper et avsnitt. Det refererer til "klar" klasse. Dersom det ikke referere til den klasse, ville det avsnitt vises på høyre side av den tredje div på samme linje. For å gjøre avsnitt vises på en linje for seg selv under de tre divs, må du bruke "klar" klasse. Det klarner det siste elementet er "flyte" og lar avsnitt til å vises på en ny linje.

6 Lagre dokumentet og vise den i en nettleser. To gule divs vises øverst på websiden. Den første som flyter til venstre på siden og den andre vises til høyre. Den neste linjen viser de tre divs du fløt til venstre. De strømmer fra venstre til høyre. Avstanden mellom dem er avhengig av verdien av "margin" du definert i CSS. Fordi du fjernet flyter på avsnittselementer, vises det under de tre divs.

Hint

Når man flyte flere div-elementer til venstre, nettlesere forsøk på å plassere hver av dem til høyre for den foregående div. Hvis en ny div ikke får plass på samme rad, en nettleser brytes den til neste linje. Når du oppretter float klasser som gjelder for divs, gi disse klassene "width" verdier som vist i dette eksemplet. .