Faire en sorte que les divs aient une largeur de 20 % avec un remplissage entre chacun, mais pas à gauche du premier ni à droite du dernier
-
02-01-2020 - |
Question
Disons que j'ai cette mise en page à construire :
En supposant que le texte et la grille se trouvent dans le même div et partagent donc une largeur d'environ 990 pixels, comment puis-je faire en sorte que cette grille ait dynamiquement des colonnes de largeur égale, sans largeurs fixes ?
Je pourrais définir chacun div
à width:20%
, mais ensuite ils s'aligneraient directement les uns à côté des autres au lieu d'être espacés. http://jsfiddle.net/97H3P/
Je pourrais définir chacun div
à width: 20%
, box-sizing: border-box
, et padding: 0 20px
, mais il y aurait alors un écart de 20 pixels entre le bord des lignes et le bord du premier et du dernier div
. http://jsfiddle.net/97H3P/1/
Je pourrais configurer chacun div
à box-sizing: border-box;
, width: 20%
et padding-right: 20px
, puis à la 5ème division, définissez padding-right: 0;
, mais alors la cinquième division est plus large que les autres. http://jsfiddle.net/97H3P/2/
Je pourrais définir les quatre premiers div
s de chaque ligne à box-sizing: border-box;
, width:20.8%
, le cinquième à width: 16.8%
, et puis padding-right: 20px
à tous, mais ce calcul ne fonctionne qu'à la largeur de 990 px. http://jsfiddle.net/97H3P/3/
Y a-t-il une meilleure manière de faire cela?Je ne trouve aucune solution élégante.
Merci.
Mise à jour:Pendant quelques minutes, je me suis intéressé aux CSS3 column-count
fonctionnalité, mais j'ai ensuite réalisé que cela ne fonctionnait que de haut en bas, pas de gauche à droite, c'est ainsi que j'ai besoin de cette commande.
La solution
Voici un exemple non-Boostrap que j'ai esquissé rapidement.
Même s'il utilise les classes Bootstrap.
L'astuce est réalisée en utilisant le position: relative
et box-sizing: border-box
Il est également plutôt réactif.
Autres conseils
Tu devrais jeter un oeil à flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Que diriez-vous d'utiliser des divs supplémentaires comme espaceurs ? Violon
HTML
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
CSS
div {
background: #000;
height: 200px;
float: left;
opacity: 0.2;
width: 18%;
}
div.spacer{
opacity: 1;
width: 2.5%;
}