[shaun236]

Zdravím všetkých,

Som úplne nový web pre projektovanie a učenie, čo som od piky s niektorými online tutorials / screencasts. Potřebuju malú pomoc od vás.

Mám štyri div v mojej značky. Jeden je "obal" div, zatiaľ čo ostatné tri divs sa zobrazí obrázok a obsah. Mám na stred je "obal" div. Všetky tri div sa má rovnakú šírku a aj rovnaký ľavý a pravý rozpätie. Táto stránka vyzerá skoro ako chcete pozrieť, ale keď som začať priblížite po určitom bode obrázky začnú prekrývať.

I když jsem zvýšenie / zníženie max-width pre "obal" div ostatné divs v ňom nie sú prispôsobené rovnako. Mám použiť% na šírku a rozpätia a veril som, že by sa o to postarám. Čo robím zle ... prosím poradiť?

Potřebuju pomoct s týmto:

I 1.When zoom-in, prečo obrázky začať prekrývajúce?
2.When I reset "obal" max-width, prečo nie je iné divs udržať svoju pozíciu?

Prosím môžete mi poradiť, ako je to opraviť? Tiež som pripojený môj Značkovacie súboru.

Thanks in advance!

HTML kód:


Elastic Dispozície





To je div1







To je div2







To je div3









CSS Pravidlá

Kód:


body (
margin: 0;
padding: 0;
)

# Wrapper (
margin: 0 auto;
max-width: 60em;
border: 1px bodkovaný modrá;
výška: 20ème;
)

# Div1 **
float: left;
šírka: 30,1%;
margin: 0 1,6% 0 1,6%;
)

# Div2 **
float: right;
šírka: 30,1%;
margin: 0 1,6% 0 1,6%;
)

# Div3 **
float: left;
šírka: 30,1%;
margin: 0 1,6% 0 1,6%;
)



Priložené súbory ElasticLayout.zip (4,7 KB)