Hvordan Juster innholdet på en DIV til bunns i CSS

Hvordan Juster innholdet på en DIV til bunns i CSS


DIV-koder definere oppsettet av HTML-sider. Mens alle typer innhold kan plasseres innenfor DIV-koder, er plassering av innhold administreres ved hjelp av Cascading Style Sheets (CSS). Justering av div koder seg selv og justering av innholdet i DIV-koder er to helt forskjellige scenarier.

En enkelt tekstlinje kan justeres til bunnen, simpelthen ved å angi linjehøyden som det dobbelte av høyden av DIV som inneholder det minus den faktiske linjehøyde på tekst. Bildeelementer svare på den "vertical-align: bottom;" kodelinje skrevet i CSS.

Bruksanvisning

1 Åpne HTML-siden og den tilsvarende CSS-filen i to forskjellige vinduene i en enkel HTML eller tekst-editor, for eksempel Notisblokk.

2 Finn DIV i HTML for der innholdet må justeres til bunnen. Tildele en DIV "id" hvis man ikke allerede er tildelt.

3 Pakk bestemt DIV tag med en annen forelder DIV tag i HTML og tildele en unik DIV "id" for det. Dette er kjent som en "hylster DIV» og den eksisterende DIV innsiden ville da bli en "barne DIV».

4 Finn kodeblokken for "barn DIV" i CSS-filen og endre sin "posisjon" verdien til "absolutt" ved å sette inn / bytte "position: absolute;" i kodeblokken.

5 Lag en frisk kodeblokk i CSS for "wrapper DIV" og tildele "posisjon" verdi "slektning" ved å sette inn "position: relative;" i koden blokken.

6 Legg CSS-koden-line "bottom: 0;" til den kodeblokk av den "barne DIV» i CSS.

Hint

  • Den samme fremgangsmåte kan anvendes til å justere innholdet vertikalt på ethvert nivå ved å justere verdien "bottom: 0;" eller ved hjelp av "top:" eiendom i CSS.
  • Selv om CSS ikke alltid gir enkle løsninger, definitivt alle layout problemer kan løses med CSS ved hjelp av en kombinasjon av korrelerte CSS egenskaper.
  • Bottom justeringen fungerer bra hvis de DIV elementer er laget for å etterligne egenskapene til en HTML-tabell ved å definere "display: table;" eller "display: table-cell;" sammen med "vertical-align: bottom;" eiendom i CSS. Dette fungerer i alle nettlesere unntatt Internet Explorer fordi Internet Explorer ikke gjenkjenner "display: table;".
  • Mens den vertikale-align eiendom CSS fungerer OK når innholdet er av "image" type, det er ingen spesifikk CSS-koden linje for å vertikalt justere teksten.
  • Internet Explorer nettlesere har visse feil om "stillingen" eiendom CSS, også. Så HTML-sider må testes grundig for kryss-nettleser kompatibilitet før du gjør dem live.
  • De enkleste feil, for eksempel manglende semikolon i CSS, kan helt ødelegge oppsettet av HTML-sider. Lagre endringer og forhåndsvise HTML-siden etter hver redigering gjort til CSS-filen eller HTML-kilden, for å unngå forvirring senere.