Pouvez-vous forcer une hauteur de la divoneur pour accueillir deux enfants divisés flottés? Y a-t-il une astuce fantaisie que je peux utiliser pour faire ça? J'essaie de faire deux divs de taille égale à l'intérieur du parent div. J'aimerais qu'ils apparaissent côte à côte avec un peu d'espaces entre eux. Child2 a tendance à sortir et à aller sous l'enfant1. Remarque Child2 contient une table. Dois-je flotter?
HTML: P>
div#parent
{
background-color: #C6E4E0;
border: solid 3px #017E6F;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
width:99%;
}
div#parent div
{
width:49%;
float:right;
padding:3px;
}
div#parent div:first-child
{
float:left;
}
5 Réponses :
#container { width:200px; }
.floated { width:100px; float:left; }
.clear { clear:both; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
<div class="clear"></div>
</div>
Ce n'est pas un problème clair / phare, son problème est que les flotteurs ne figurent pas côte à côte.
Je ne suis pas un fan de clair: les deux; , je préfère faire cela dans Jonathan Sampsons Exemple:
En fait, cela a travaillé pour moi. Éviter des "clairs supplémentaires" Div, le parent a obtenu la bonne hauteur, y compris le rembourrage.
Au fait, vous voulez
au lieu de
Ce qui n'est toujours pas ie6 amical, mais il flotte tous les deux enfants divs. div # parent> div {flotteur: gauche; }
div # parent div: premier enfant {flotteur: gauche; }
En fait non, il veut flotter le premier div au-delà de la droite et de la deuxième div à gauche, alors le premier enfant est correct.
J'utilise la classe Clearfix.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/
.clearfix {
display: block;
}
/* End hide from IE-mac */
Ce n'est pas un problème de Clearfix, son problème est que ses deux divs flottés n'apparaissent pas côte à côte.
Tout d'abord, vous n'avez pas besoin de définir la largeur du parent div, les DIV sont des éléments de blocs, ce qui signifie qu'ils ajustent automatiquement leur largeur pour prendre la pleine largeur de leur parent (dans ce cas, vraisemblablement le parent de DIV. #parent est le corps).
Parce que vous réglez explicitement la largeur et que vous lui donnez du rembourrage, il peut potentiellement aller au-delà du corps. Cela n'a pas d'importance, mais si vous appliquez cette même connaissance à l'enfant des divs flottés et que vous pouvez voir pourquoi la bonne pourrait être heurtée au fond.
Premièrement, si vous définissez explicitement les largeurs des divs vers un pourcentage, vous n'avez pas besoin d'ajouter du remplissage. Parce que vous avez affaire à des largeurs de pourcentage, il est préférable d'ajouter du rembourrage au contenu des divs plutôt que des divs eux-mêmes, car le rembourrage est ajouté à la largeur. Par conséquent, si vous avez ajouté 10 px Rembourrage à une DIV comportant une largeur de 49% dans un parent de 100 px, il aurait une largeur de 49px + 10px + 10px (2 côtés) pour une largeur totale calculée de 69px.
Puisque vous n'avez pas publié votre balisage et votre contenu ou quel navigateur vous testez-vous, je ne peux pas dire exactement pourquoi la div est tombée en panne. Il y a deux possibilités probables.