Hvordan lage kolonner med CSS Float

Hvordan lage kolonner med CSS Float


Ikke bli skremt av tanken på å gi opp layouttabeller. CSS layout kolonner kan opprettes pålitelig med flottøren eiendommen.

Bruksanvisning

Bruk Divs å lage kolonner

1 Det er flere trinn involvert i å få til kolonnene du ser i det innledende bildet i begynnelsen av artikkelen. Den første er å skape en container div som vil holde alt i layouten. Dette vil bidra til å holde ting som topp- og bunntekst i tråd med alt annet. Her er et eksempel CSS #container regel:

container {

width: 700px;

}

Bredden trenger ikke å være i piksler. Det kan være i EMS eller prosenter. Du kan inkludere bakgrunnsfarge, grenser og mange andre CSS egenskaper i denne regelen.

2 Innenfor HTML container div, sette inn en div for innholdet kolonne og en div for sidepanelet kolonnen.

Det forbedrer tilgjengeligheten til å ha innholdet kommer først i dokumentet. For å gjøre det synes som den venstre kolonnen, er neste skritt å sette en bredde på kolonnen og sett den til å flyte til venstre marg (av beholderen).

innhold {

width: 65%;
float: left;

}

Bredden kan være i piksler, EMS eller prosenter. Gjøre innholdet omtrent to tredjedeler av bredden av beholderen, slik at omtrent en tredjedel av bredden til sidefeltet.

3 Hvis du vil plassere sidepanelet div, du gir den en bredde og en veldig stor venstre marg.

sidebar {

width: 30%;
margin-left: 70%;

}

Du kan bruke piksler, EMS eller prosenter å angi bredden. Velg en enhet som samsvarer med hva du velger for beholderen og innhold. I dette eksemplet, brytes sidepanelet rundt den høyre del av innholdet, som fløtes til venstre. La det være nok margin på venstre side av sidepanelet for å gi plass for innholdet div.

Fordi sidepanelet er begrenset til en bredde på 30 prosent og har et bredt margin-left innstillingen, vil sidepanelet ikke brytes under fløt innholdet, selv om det skjer for å være den lengste kolonnen.

Hint

  • Hvis du vil at innholdet div til høyre, bruker float: right. Deretter tilpasse seg deretter til margin-right på sidelinjen div.
  • Borders, bakgrunnsbilder eller bakgrunnsfarge og mange andre CSS egenskaper kan brukes til å lage hver kolonne visuelt tydelig i sideoppsettet.
  • Hvis du ønsker å inkludere en bunntekst div inne i containeren, sørg for å bruke den klare: både regelen for å hente den ned under fløt innhold div og legg den i bunnen av beholderen.