[shaun236]

Hej Alla,

Jag är helt ny på webben utforma och jag lära saker från scratch med några online tutorials / screencasts. Jag behöver lite hjälp från er.

Jag har fyra div I mitt markup. Den ena är en "wrapper" div medan övriga tre divs är att visa några bilder och innehåll. Jag har handlat på "wrapper" div. Alla tre div inom den har samma bredd och har också lika vänster och höger marginal. Sidan ser ut ungefär hur jag vill att det ska se ut, men när jag börjar att zooma in efter en viss punkt bilderna börja överlappa varandra.

Även när jag öka / minska max bredd för "wrapper" div andra divs inom den inte anpassas lika. Jag har använt% för bredd och marginal och jag trodde att ta hand om det. Vad gör jag för fel ... du råd?

Jag behöver hjälp med följande:

1.When Jag zooma in varför bilder börja sammanträffande?
2.När jag nollställa "wrapper" max bredd varför inte andra divs behålla sin position?

Vänligen råd hur jag kan åtgärda dem? Jag har också bifogat min markup fil.

Tack på förhand!

HTML-kod:


Elastisk Layout





Detta är div1







Detta är div2







Detta är div3









CSS Regler

Kod:


body (
margin: 0;
padding: 0;
)

# wrapper (
margin: 0 auto;
max-width: 60em;
border: 1px streckade blå;
height: 20em;
)

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

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

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



Bifogade filer ElasticLayout.zip (4.7 KB)