[shaun236]

Hei Alle,

Jeg er helt ny på web designer og jeg lære ting fra grunnen av med noen elektroniske opplæringsprogrammer / screencasts. Jeg trenger litt hjelp fra dere.

Jeg har fire div i mitt markup. Den ene er en "wrapper" div mens tre andre divs er å vise noen bilder og innhold. Jeg har fokusert på "wrapper" div. Alle tre div innen det har lik bredde og har også like til venstre og høyre marg. Siden ser pen mye det jeg vil den skal se ut, men når jeg begynner å zoome inn etter et visst punkt bildene begynner å overlappe.

Også når jeg øke / redusere maks bredde for "wrapper" div andre divs innen det ikke er justert like. Jeg har brukt% for bredde og margin og jeg trodde det skulle ta seg av det. Hva gjør jeg galt ... kan du råd?

Jeg trenger hjelp med følgende:

1.When jeg zoom-in hvorfor bilder starte overlapper?
2. Når jeg nullstille "wrapper" max-width hvorfor ikke andre divs beholde plasseringen?

Vær råd hvordan jeg kan løse dem? Jeg har også vedlagt mitt markup fil.

Takk på forhånd!

HTML Code:


Elastiske Layout





Dette er div1







Dette er div2







Dette er div3









CSS Regler

Code:


body (
margin: 0;
padding: 0;
)

# wrapper (
margin: 0 auto;
max-width: 60em;
border: 1px dotted blue;
height: 20em;
)

# div1 **
float: left;
Bredde: 30,1%;
margin: 0 1,6% 0 1,6%;
)

# div2 **
float: right;
Bredde: 30,1%;
margin: 0 1,6% 0 1,6%;
)

# div3 **
float: left;
Bredde: 30,1%;
margin: 0 1,6% 0 1,6%;
)



Vedlagte filer ElasticLayout.zip (4,7 KB)