[shaun236]

Salut tous,

Je suis complètement nouveau pour la conception web et j'apprends des choses à partir de zéro avec des didacticiels en ligne / screencasts. J'ai besoin d'aide de vous les gars.

J'ai quatre div dans mon balisage. L'un est un "wrapper" div alors que trois autres sont divs pour afficher une image et de contenu. J'ai centré le "wrapper" div. Tous les trois div à l'intérieur est égale largeur et de l'égalité a également la marge de gauche et de droite. La page ressemble à peu près la façon dont je veux que ce look, mais quand je commence à en zoom après un certain point, les images commencent à se chevaucher.

Aussi quand je augmenter / réduire le max-width pour "wrapper" div divs dans l'autre ne sont pas alignés sur un pied d'égalité. J'ai utilisé pour la largeur% et la marge et je pense que devrait prendre soin d'elle. Qu'est-ce que je fais de mal ... s'il vous plaît des conseils?

J'ai besoin d'aide avec le texte suivant:

1.Lorsqu 'ils I zoom-in pour commencer les images se chevauchent?
2.Lorsqu 'je réinitialiser le "wrapper" max-width, pourquoi pas d'autres divs de maintenir sa position?

S'il vous plaît conseils comment je peux les corriger? J'ai également joint mon fichier de marquage.

Merci d'avance!

Code HTML:


Elastic Layout





C'est div1







C'est div2







C'est DIV3









Règlement CSS

Code:


body (
margin: 0;
padding: 0;
)

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

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

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

# DIV3 **
float: left;
largeur: 30,1%;
margin: 0 1,6% 0 1,6%;
)



Fichiers attachés ElasticLayout.zip (4,7 KB)