J'ai une DIV qui contient trois éléments et j'ai des problèmes de positionnement correctement le dernier. La DIV à gauche doit être à gauche, celle du milieu doit être centrée, et le troisième doit être à droite.
Donc, j'ai quelque chose comme: p>
<div id="container-div">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
<div id="right-element">
I am the text in right element
</div>
</div>
4 Réponses :
Je pense que vous avez un problème, c'est que vous avez flotté l'élément gauche et droit, mais pas le centre. Essayez quelque chose comme ceci:
CSS: html:
Vous auriez besoin d'ajouter une méthode de compensation flottante à cela afin que vous puissiez éviter de spécifier la hauteur du conteneur div, mais sinon vous avez identifié le problème, l'ID DIV central n'est pas flotté, il reste donc un élément de niveau de bloc.
Tu as raison Brent. J'utilise habituellement une sorte de style Clearfix, appliqué comme une classe sur le conteneur. Je suis habitué à écrire tous mes styles en moins maintenant, alors écrivez de long terme comme celui-ci sans mes mélanges et mes variables, je néglige parfois ces choses.
Vous n'avez pas inclus CSS pour votre conteneur DIV, mais chaque fois que cela contient des éléments flottants, vous devriez masquer le débordement comme: lorsque vous positionnez le Moyen Div, vous définissez des marges de la plage L'ensemble du récipient, de sorte que tout autre élément se positionné sur la ligne ci-dessous. Remarque, au moins pour la plupart des navigateurs modernes, plus loin em>. Si vous réorganisez vos éléments, comme: P> #container {
overflow: hidden;
width: 100%;
min-height: 36px; /* Remember absolute positioning is outside the page flow! */
position: relative;
}
#left-element {
position: absolute;
left: 9px;
top: 3px;
width: 13px;
}
#middle-element {
margin: 0 auto;
text-align: center;
width: 300px;
}
#right-element {
position: absolute;
right: 0px;
top: 0px;
width: 100px;
}
Bien sûr, cela suppose que l'élément intermédiaire est d'une taille de police inconnue ou variable. Sinon, vous pouvez simplement appliquer la marge-top: - ## px; au bon élément;)
Overflow: Caché n'est pas une bonne méthode de nettoyage des flotteurs car elle provoque des problèmes inattendus avec les propriétés CSS3. Clearfix est le meilleur moyen d'y aller. FordinterActive.com/2009/12/goodbye-overflow-Clearing-Hack
Le problème est spécifiquement que le Moyen DIV a un ensemble de largeur mais n'est pas flotté, ce qui signifie qu'il s'agit toujours d'un élément de niveau de bloc. Même si la DIV elle-même ne va pas toute la largeur du conteneur, elle est toujours traitée comme telle. Vous devez faire 2 choses - flotter le Moyen DIV, puis effacer les flotteurs afin que le conteneur se développe avec la hauteur de l'enfant divs. La méthode ClearFix est préférable car elle ne cause pas de problèmes avec les propriétés CSS3 qui s'étendent naturellement en dehors des limites de l'élément qu'ils sont appliqués à (ombre de la boîte, de la text-ombre, etc.).
http://perishablypress.com/press/2009/12 / 06 / New-Clearfix-Hack /
J'ai eu le même problème. J'ai utilisé cette approche. J'ai fait l'affichage de l'élément central en ligne. De cette façon, je n'avais pas eu à donner la largeur spécifique des éléments ou le conteneur principal une hauteur spécifique. Les blocs ont seulement pris autant d'espace que le contenu à l'intérieur. J'espère que cela aide.
p>
<header class="clearfix">
<div class="main-nav">
<a href="index.html" id="logo-link" class="clearfix"><img src="img/site-logo.svg" alt="Munchies" id="logo"></a>
<div class="name">
<h1>The Munchies Family Site</h1>
<h2>Designer</h2>
</div>
<nav class="nav clearfix">
<ul>
<li><a href="index.html">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
Quelle est la largeur du conteneur-div?