Voici mon code, j'essaye d'aligner les divs enfants les uns à côté des autres avec une largeur de 50%. Cependant ça ne marche pas, qu'est-ce que je manque?
<div class="container"> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> </div>
.container{
width: 900px;
border: 2px solid red;
}
.child{
width: 50%;
border: 2px solid black;
float: left;
}Je voudrais continuer à utiliser des flotteurs car j'essaie d'imiter un HTML généré par un autre système.
4 Réponses :
Il vous manquait la propriété de box-sizing la box-sizing . Lorsque vous utilisez border, vous devez définir la valeur sur border-box; . Il est recommandé de définir cette propriété globalement comme:
*, *:before, *:after {
box-sizing: border-box;
}
Je voudrais continuer à utiliser des flotteurs car j'essaie d'imiter un HTML généré par un autre système.
Mise à jour de la réponse
Pourriez-vous essayer ceci
<div class="container"> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> </div>
.container{
width: 900px;
background: red;
display: inline
}
.child{
width: 50%;
background: green;
float:left
}Je voudrais continuer à utiliser des flotteurs car j'essaie d'imiter un HTML généré par un autre système.
J'ai mis à jour à nouveau
Merci! mais pourquoi afficher en ligne? est-il recommandé pour les divs?
Affiche un élément en tant qu'élément en ligne (comme <span>). Toutes les propriétés de hauteur et de largeur n'auront aucun effet
mais de cette façon, la div parent n'a pas de frontières.
Si vous allez utiliser des bordures "width: calc (50% - 4px);"
#1. Cette solution avec box-sizing: border-box pour .child (c'est probablement ce dont vous avez besoin):
<div class="container"> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> </div>
.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 900px;
max-width: 100%;
border: 2px solid red;
}
.child{
width: auto;
border: 2px solid black;
/*float: left;*/
} # 2. Cette solution avec flexbox :
<div class="container"> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> </div>
.container{
display: flex;
flex-wrap: wrap;
width: 900px;
max-width: 100%;
border: 2px solid red;
}
.child{
box-sizing: border-box;
width: 50%;
border: 2px solid black;
/*float: left;*/
} # 3. Cette solution avec grid :
<div class="container"> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> <div class="child">Hello hello hello</div> </div>
.container{
width: 900px;
max-width: 100%;
border: 2px solid red;
}
.child{
box-sizing: border-box;
width: 50%;
border: 2px solid black;
float: left;
}La raison (la largeur 50% ne fonctionne pas) est que vous ajoutez la bordure 2px au div. Ensuite, la largeur de div sera de 50% + 4px (2px à gauche, 2px à droite) donc il n'y a pas assez d'espace pour inclure deux div dans la même ligne.
Voici donc la solution
.child{
width: 446px; /*(900/2)-4*/
}
Ou ceci, si l'enfant n'a pas besoin de redimensionner
.child{
width: calc(50% - 4px);
}
je modifie déjà =]
Je voudrais continuer à utiliser des flotteurs car j'essaie d'imiter un HTML généré par un autre système.
Il vous manque également un correctif .
Merci pour le conseil! Je suis nouveau en CSS cela aidera beaucoup