Si css3 est une option, cela peut être fait en utilisant la calc()fonction css .
Cas 1: Justifier les cases sur une seule ligne ( FIDDLE )
Le balisage est simple - un tas de divs avec un élément conteneur.
CSS ressemble à ceci:
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
où -1px pour corriger un bug de calcul / arrondi IE9 + - voir ici
Cas 2: justification des cases sur plusieurs lignes ( FIDDLE )
Ici, en plus de la calc()fonction, media queriessont nécessaires.
L'idée de base est de mettre en place une requête média pour chaque état #columns, où j'utilise ensuite calc () pour calculer la marge de droite sur chacun des éléments (sauf ceux de la dernière colonne).
Cela ressemble à beaucoup de travail, mais si vous utilisez LESS ou SASS, cela peut être fait assez facilement
(Cela peut toujours être fait avec des CSS réguliers, mais vous devrez alors faire tous les calculs manuellement, puis si vous changez la largeur de votre boîte - vous devez tout recommencer)
Voici un exemple utilisant LESS: (Vous pouvez copier / coller ce code ici pour jouer avec, [c'est aussi le code que j'ai utilisé pour générer le violon mentionné ci-dessus])
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
Donc, fondamentalement, vous devez d'abord décider d'une largeur de boîte et d'une marge minimale que vous souhaitez entre les boîtes.
Avec cela, vous pouvez déterminer la quantité d'espace dont vous avez besoin pour chaque état.
Ensuite, utilisez calc () pour calculer la marge droite et nth-child pour supprimer la marge droite des cases de la dernière colonne.
L' avantage de cette réponse par rapport à la réponse acceptée qui utilise text-align:justifyest que lorsque vous avez plus d'une ligne de cases - les cases de la dernière ligne ne sont pas «justifiées», par exemple: s'il reste 2 cases sur la dernière ligne - I Je ne veux pas que la première case soit à gauche et la suivante à droite - mais plutôt que les cases se suivent dans l'ordre.
En ce qui concerne la prise en charge du navigateur : cela fonctionnera sur IE9 +, Firefox, Chrome, Safari6.0 + - (voir ici pour plus de détails) Cependant, j'ai remarqué que sur IE9 +, il y a un petit problème entre les états de requête multimédia. [si quelqu'un sait comment résoudre ce problème, j'aimerais vraiment le savoir :)] <- CORRIGÉ ICI
display:inline-block;au lieu de flotter?