Division en 2 colonnes à l'aide de CSS
J'ai essayé de scinder une div en deux colonnes à l'aide de CSS, mais je n'ai pas encore réussi à le faire fonctionner. Ma structure de base est la suivante:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
Si je tente de faire flotter les divs droit et gauche dans leurs positions respectives (droite et gauche), il semble ignorer la couleur de fond de la div du contenu. Et les autres codes que j'ai essayés sur différents sites Web ne semblent pas pouvoir être traduits dans ma structure.
Merci pour toute aide!
Lorsque vous faites flotter ces deux divs, le contenu div se réduit à une hauteur nulle. Il suffit d'ajouter
<br style="clear:both;"/>
après le #right div mais à l'intérieur du contenu div. Cela forcera la div content à entourer les deux div internes et flottantes.
Cela fonctionne bien pour moi. J'ai divisé l'écran en deux moitiés: 20% et 80%:
<div style="width: 20%; float:left">
#left content in here
</div>
<div style="width: 80%; float:right">
#right content in there
</div>
Pour ce faire, vous pouvez également ajouter overflow:hidden; à l'élément parent des éléments flottants.
débordement: hidden fera que l'élément s'agrandisse pour s'intégrer aux éléments flottants.
De cette façon, tout peut être fait en css plutôt que d'ajouter un autre élément HTML.
La manière la plus flexible de faire ceci:
#content::after {
display:block;
content:"";
clear:both;
}
Cela équivaut à ajouter l'élément à #content:
<br style="clear:both;"/>
mais sans ajouter réellement un élément. :: after est appelé un pseudo-élément. La seule raison pour laquelle il vaut mieux que d'ajouter overflow:hidden; à #content est que vous pouvez avoir un débordement d'éléments enfants positionnés de manière absolue tout en restant visible. De plus, cela permettra aux boîtes-ombres d'être toujours visibles.
Pour une raison quelconque, je n'ai jamais aimé les approches de compensation, je me fie aux flottants et aux largeurs en pourcentage pour des choses comme celle-ci.
Voici quelque chose qui fonctionne dans des cas simples:
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
Si vous mettez du contenu dans vous verrez que cela fonctionne:
<div id="content">
<div id="left">
<div id="object1">some stuff</div>
<div id="object2">some more stuff</div>
</div>
<div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti</div>
</div>
</div>
Vous pouvez le voir ici: http://cssdesk.com/d64uy
Faites aux enfants divs inline-block et ils se placeront côte à côte:
#content {
width: 500px;
height: 500px;
}
#left, #right {
display: inline-block;
width: 45%;
height: 100%;
}
Voir Démo
Meilleure façon de diviser une div verticalement -
#parent {
margin: 0;
width: 100%;
}
.left {
float: left;
width: 60%;
}
.right {
overflow: hidden;
width: 40%;
}
Je sais que ce post est ancien, mais si vous êtes toujours à la recherche d'une solution plus simple.
#container .left,
#container .right {
display: inline-block;
}
#container .left {
width: 20%;
float: left;
}
#container .right {
width: 80%;
float: right;
}
Les flotteurs n'affectent pas le débit. Ce que j'ai tendance à faire est d'ajouter un
<p class="extro" style="clear: both">possibly some content</p>
à la fin du 'wrapping div' (dans ce cas le contenu). Je peux justifier cela sur une base sémantique en disant qu'un tel paragraphe pourrait être nécessaire. Une autre approche consiste à utiliser un CSS clearfix:
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content {
display: inline-block;
}
/* \*/
* html #content {
height: 1%;
}
#content {
display: block;
}
/* */
La astuce avec les commentaires concerne la compatibilité entre navigateurs.
C'est la meilleure réponse ici Question 211383
De nos jours, toute personne qui se respecte devrait utiliser la méthode dite du "micro-clearfix" des flotteurs de compensation.
Aucune des réponses données ne répond à la question initiale.
La question est de savoir comment séparer une div en 2 colonnes en utilisant css.
Toutes les réponses ci-dessus incorporent en fait 2 divs dans un seul div afin de simuler 2 colonnes. C'est une mauvaise idée, car vous ne pourrez pas transférer le contenu dans les 2 colonnes de manière dynamique.
Donc, au lieu de ce qui précède, utilisez un seul div qui est défini pour contenir 2 colonnes en utilisant CSS comme suit ...
.two-column-div {
column-count: 2;
}
attribuez ce qui précède en tant que classe à une div, et son contenu sera en réalité transféré dans les 2 colonnes. Vous pouvez aller plus loin et définir également les écarts entre les marges. Selon le contenu de la div, vous devrez peut-être manipuler les valeurs de saut de mot pour que votre contenu ne soit pas coupé entre les colonnes.
- Rendre la taille de la police égale à zéro dans la division parent.
Définissez la largeur en% pour chacune des DIV enfants.
#content { font-size: 0; } #content > div { font-size: 16px; width: 50%; }
* Dans Safari, vous devrez peut-être définir 49% pour que cela fonctionne.
Diviser une division en deux colonnes est très facile, il suffit de spécifier mieux la largeur de votre colonne si vous mettez ceci (comme largeur: 50%) et définissez les valeurs float: left pour left column et float: right pour colonne de droite.
Vous pouvez utiliser flexbox pour contrôler la disposition de votre élément div:
* { box-sizing: border-box; }
#content {
background-color: rgba(210, 210, 210, 0.5);
border: 1px solid #000;
padding: 0.5rem;
display: flex;
}
#left,
#right {
background-color: rgba(10, 10, 10, 0.5);
border: 1px solid #fff;
padding: 0.5rem;
flex-grow: 1;
color: #fff;
}<div id="content">
<div id="left">
<div id="object1">lorem ipsum</div>
<div id="object2">dolor site amet</div>
</div>
<div id="right">
<div id="object3">lorem ipsum</div>
<div id="object4">dolor site amet</div>
</div>
</div>