L'égalité de marge sur les deux côtés de l'élément en responsive layout
Salut, je suis en train de créer un réactif de mise en page où j'ai trois différents éléments sur la taille et je veux une marge égale sur les deux côtés du milieu de l'élément pour tous les écrans.
Voici mon code HTML et CSS
<section class="container">
<div href="/" class="pull-left logo"><img src="/images/logo.jpg"></a>
<div class="slogan pull-left"><img src="/images/slogan.jpg"></div>
<div class="pull-left support"></div>
</section>
<style>
.pull-left
{
float-left;
}
.slogan
{
margin: 0 17%;
}
</style>
Depuis le logo et les sections de support sont de taille fixe. Au-dessus de Css fonctionne très bien pour une résolution, mais comme la taille de l'écran passe en bas de la marge ne reste pas même.
Toutes les idées de comment y parvenir?
EDIT: Voici le violon. http://jsfiddle.net/VdYua/22/
D'abord il y a autant de marge de chaque côté .slogan div. Mais sur la reconstitution de la taille de la dernière div va à la ligne suivante. Je veux la marge a diminué sans freinage de mise en page.
Donner la largeur de votre
.slogan
divSi vous pouvez fournir un jsFiddle du problème, il serait également utile.
mise à jour avec un violon
OriginalL'auteur Sanjeev | 2013-01-15
Vous devez vous connecter pour publier un commentaire.
Vous êtes à la recherche pour quelque chose comme ceci?
HTML:
CSS:
À l'aide de
margin: 0 auto
centre les éléments horizontalement, ce qui signifie qu'il sera "l'Égalité de marge sur les deux côtés"Vous n'avez pas à définir une largeur sur des éléments lors de l'utilisation de la méthode ci-dessus, mais comme indiqué, vous pouvez utiliser le pourcentage des largeurs (comme je l'image vous pourriez bien être d'un réactif de mise en page)
Cependant on ne peut pas utiliser cette technique sur flottait éléments, de sorte que vous cherchez peut-être ajouter quelque chose comme ceci dans votre CSS:
Si j'ai mal compris votre question s'il vous plaît laissez-moi savoir.
EDIT: En réponse au commentaire ci-dessous, je pense que j'ai réussi à obtenir ce que vous cherchez, consultez cette violon
HTML:
CSS:
Le positionnement/rembourrage aspect des choses n'est pas particulièrement jolie (si la largeur de .de soutien ou de .changement de logo, vous devez changer ça dans le css mais je pense c'est le seul moyen sûr de le faire avec du pur HTML/CSS dans un navigateur croix de chemin (je serais intéressé de voir quelqu'un elses de prendre sur elle tout de même), l'important c'est que ça marche et c'est tout à fait valable.
Désolé d'avoir pris autant de temps pour revenir à vous, j'ai modifié ma réponse, veuillez voir ci-dessus et laissez-moi savoir si vous avez besoin de plus d'aide.
Merci pour votre réponse. Cela a fonctionné parfaitement sur chrome et Firefox, mais margin: 0 auto; ne fonctionne pas sur IE8.
C'est en raison de votre utilisation de la
section
élément qui IE8 et ci-dessous ne prennent pas en charge, regarder dans l'aide d'un HTML5 Shiv (qui les fait travailler dans IE8) ou de modifier lesection
élément dans undiv
élément (je vous recommande le dernier)Je l'ai changé à div et cela a fonctionné. Je vous remercie beaucoup.
OriginalL'auteur Sean