[shaun236]

Zdravím všechny,

Jsem zcela nový web pro projektování a učení, co jsem od píky s některými online tutorials / screencasts. Potřebuju malou pomoc od vás.

Mám čtyři div v mé značky. Jeden je "obal" div, zatímco ostatní tři divs se zobrazí obrázek a obsah. Mám na střed je "obal" div. Všechny tři div se má stejnou šířku a také rovný levý a pravý rozpětí. Tato stránka vypadá skoro jak chcete podívat, ale když jsem začít přiblížíte po určitém bodě obrázky začnou překrývat.

I když jsem zvýšení / snížení max-width pro "obal" div ostatní divs v něm nejsou přizpůsobeny stejně. Mám použita% na šířku a rozpětí a věřil jsem, že by se o to postarám. Co dělám špatně ... prosím poradit?

Potřebuju pomoct s tímto:

I 1.When zoom-in, proč obrázky začít překrývající?
2.When I reset "obal" max-width, proč není jiné divs udržet svoji pozici?

Prosím můžete mi poradit, jak je opravit? Také jsem připojený můj značkovacím souboru.

Thanks in advance!

HTML kód:


Elastic Dispozice





To je div1







To je div2







To je div3









CSS Pravidla

Kód:


body (
margin: 0;
padding: 0;
)

# wrapper (
margin: 0 auto;
max-width: 60em;
border: 1px tečkovaná modrá;
výška: 20em;
)

# div1 **
float: left;
šířka: 30,1%;
margin: 0 1,6% 0 1,6%;
)

# div2 **
float: right;
šířka: 30,1%;
margin: 0 1,6% 0 1,6%;
)

# div3 **
float: left;
šířka: 30,1%;
margin: 0 1,6% 0 1,6%;
)



Přiložené soubory ElasticLayout.zip (4,7 KB)