Comment mettre un espace entre les divs flottants ?

Question

J'ai un div parent, qui peut changer de taille en fonction de l'espace disponible. À l'intérieur de cette div, j'ai des divs flottantes. J'aimerais avoir un espace entre ces divisions, mais pas d'espace pour la division parent (voir dessin).

Y a-t-il un moyen de faire cela avec CSS ?

Merci.

Answer 1

J'ai trouvé une solution, qui m'aide au moins dans ma situation, elle n'est probablement pas adaptée à d'autres situations :

Je donne à tous mes divs enfants verts une marge complète :

margin: 10px;

Et pour la division parent jaune qui l'entoure, j'ai défini une marge négative :

margin: -10px;

J'ai également dû supprimer tout paramètre explicite de largeur ou de hauteur pour la div parent jaune, sinon cela ne fonctionnait pas.

De cette façon, en termes absolus, les divisions enfant sont correctement alignées, bien que la division parent jaune soit évidemment décalée, ce qui, dans mon cas, est acceptable, car elle ne sera pas visible.

Answer 2

Vous pouvez procéder comme suit :

Supposons que votre div conteneur ait une classe "yellow".

.yellow div {
    // Apply margin to every child in this container
    margin: 10px;
}

.yellow div:first-child, .yellow div:nth-child(3n+1) {
    // Remove the margin on the left side on the very first and then every fourth element (for example)
    margin-left: 0;
}

.yellow div:last-child {
    // Remove the right side margin on the last element
    margin-right: 0;
}

Le nombre 3n+1 équivaut à un élément sur quatre en sortie et ne fonctionnera évidemment que si vous savez combien d'éléments seront affichés dans une rangée, mais il devrait illustrer l'exemple. Plus de détails concernant nth-child ici .

Note : Pour que l'option :first-child fonctionne dans IE8 et les versions antérieures, il est nécessaire d'ajouter une balise <!DOCTYPE> doivent être déclarés.

Note2 : Le sélecteur :nth-child() est pris en charge par tous les principaux navigateurs, à l'exception d'IE8 et des versions antérieures.

Answer 3

Ajouter margin à votre style de div

margin:0 10px 10px 0;

http://www.w3schools.com/css/css_margin.asp

Answer 4

Je suis en retard pour la fête mais... Je me suis retrouvé dans une situation similaire et j'ai découvert padding-right (et en bas, en haut, à gauche aussi, bien sûr). D'après ce que je comprends de sa définition, il met une zone de remplissage à l'intérieur de l'intérieur div Il n'est donc pas nécessaire d'ajouter une marge négative sur le parent comme vous l'avez fait avec une marge.

padding-right: 10px;

Cela a fait l'affaire pour moi !

Answer 5

Ne s'agit-il pas simplement d'appliquer une classe appropriée à chaque div ?

Par exemple :

.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }

Cela dépend si vous savez à l'avance à quelle division appliquer telle ou telle classe.