Hvordan lage en DIV som passer innholdet

Divs blokkere ut områder på en webside, slik at du kan styre hver del mer effektivt. Ved flytende en DIV, kan du plassere den til venstre eller høyre på siden rett ved andre elementer. Divs kan ha en kombinasjon av elementer, for eksempel tekst, bilder og menyer, så du trenger god plass til å holde innholdet. Marginer, padding eller grenser innenfor DIV eller dens innhold kan påvirke hvor mye plass også.

Bruksanvisning

justere Bredde

1 Gå til HEAD taggen i HTML-filen du endrer.

2 Sjekk målene på DIV og eventuelle elementer innen DIV du formaterer. Koden kan være lik:

<Style type = "text / css">
<! -

myContainer {

float: left;
background-color: gul;
width: 500px;
height: 40px;
}
.myImage {
float: left;
width: 500px;
height: 30px;
padding: 5px;
}
->
</ Style>

3 Endre bredden eller padding av DIV innhold, "myImage," for å gjøre det passer. Bredden på div style (myContainer) og image stil (myImage) var begge satt til 500 piksler i forrige trinn. Polstringen av "5px" in "myImage" reduserer mengden av tilgjengelig plass. For å imøtekomme bildet, endre sin bredde 490 piksler for å få plass til polstring på begge sider, fjerne "padding: 5px;" fra "myImage", eller øke DIV bredde til "510px;"

Fjerne Bredde

4 Gå til HEAD taggen i HTML-filen du endrer.

5 Finn CSS koden for DIV du vil formatere. Det kan være lik:

<Style type = "text / css">
<! -

myContainer {

float: left;
background-color: gul;
width: 500px;
height: 40px;
}
.myImage {
float: left;
width: 500px;
height: 30px;
padding: 5px;
}
->
</ Style>

6 Fjern bredden for DIV så sin kode er lik:

<Style type = "text / css">
<! -

myContainer {

float: left;
background-color: gul;
height: 40px;
}
.myImage {
float: left;
width: 500px;
height: 30px;
padding: 5px;
}
->
</ Style>