Mise À Jour Et Résumé
Je me sens obligé de faire de cette question plus clair, maintenant qu'il y a un bounty ci-joint.
(Aussi, je suis sûr que ce sera un jeu d'enfant lorsque l' calc() CSS3 unité de valeur est prise en charge, de faire quelque chose comme width: calc(25% - 5px); cependant, nous allons probablement être la navigation sur internet dans nos esprits par ce point)
Je travaille sur un framework CSS pour les quelques projets qui partagent des exigences de conception, à savoir un liquide de 12 colonnes de mise en page. À l'aide flottait .column éléments avec un pourcentage de la largeur de (100% / 12) x col_size, c'est assez facile. Toutefois, la question qui vient avec l'ajout de marges fixes (ou de toute forme de l'espacemententre les colonnes.
Ma première tentative a utilisé le fluide colonnes comme décrit, avec un .panel enfant imbriquée dans chaque. HTML/CSS extrait qui suit (réduite pour des raisons de concision):
.column{
float: left;
display: inline-block;
}
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
.panel{
width: 100%;
padding: 5px;
box-sizing: border-box; /* so padding doesn't increase width */
}
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-03">
<div class="panel">Width-03</div>
</div>
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-05">
<div class="panel">Width-05</div>
</div>
Cet extrait serait de produire une mise en page similaire à celle de l'image ci-dessous, cependant, tous .panel éléments 5px rembourrage sur tous les côtés. J'essaie de rendre le contenu de bord de l'extérieur des colonnes de niveau avec le bord de la vue-port (conteneur parent ou d'ailleurs). Une autre approche serait d'éliminer l' .panel classe tout à fait, et juste aller avec des colonnes:
.column{
float: left;
display: inline-block;
padding-left: 10px;
box-sizing: border-box;
}
.column:first-child{ padding-left: 0px; }
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
<div class="column width-02">Width-02</div>
<div class="column width-03">Width-03</div>
<div class="column width-02">Width-02</div>
<div class="column width-05">Width-05</div>
Encore une fois, cela fonctionne bien, produire des résultats encore plus proche de celle de l'image ci-dessous, mais maintenant la (réelle) problème est que le rembourrage est en train de manger dans la largeur des colonnes vissage jusqu'à la largeur de la distribution. L' :first-child colonne a 10 pixels (ou quelle que soit la taille de la marge est) une plus grande largeur de la zone de contenu que les frères et sœurs.
Cela peut sembler anodin, même imperceptible; cependant, il existe quelques cas où le fait d'avoir exacts (aussi précis que possible) de la largeur de la distribution entre les éléments est nécessaire, ou rendrait les choses carrément plus facile.
Et donc, si l'utilisation de rembourrage, de la marge, ou une combinaison de ceux-ci; est-il une solution pour le fluide colonnes, marges fixes, avec une distribution uniforme de l'espace de gouttière qui ne sont pas rob "marginale" (haha) de la zone de contenu de la colonne voisine?
Question D'Origine
En raison de la simple absence de résultats dans mes recherches et tentatives, j'en ai conclu que c'est impossible. Si n'importe où peut donner une réponse, cependant, je suis certain qu'il est ici.
Est-il possible, à l'aide de pure CSS, afin d'obtenir un liquide largeur de colonnes de mise en page à largeur fixe les marges?
Remarque importante: Cette figure n'est qu'un exemple, et non pas la mise en page spécifique, je suis à la recherche à réaliser. Une solution devrait permettre à n'importe quelle combinaison de colonnes adjacentes, la largeur totale de la distribution totalisant 12 ou moins. Envisager le populaire 960 de la grille de référence.)
Remarque: Dans un 12 mise en page en colonnes, la largeur de la distribution de l'image en colonnes 2, 3, 2, et 5, respectivement.
Jusqu'à présent, j'ai eu recours à une grille qui, à l'aide de pourcentages, près de l'accomplit. Le problème est, dans l'ordre pour atteindre les marges, chaque colonne requiert un autre enfant (je les appelle, .panel) avec:
width: 100%;
box-sizing: border-box;
padding: 10px;
C'est, encore une fois près, très bien; le problème avec cette approche est que la première et la dernière colonne externe de la marge (10px) et les "marges" entre chaque colonne sont doublés (2 x 10px)
Certes, avec l'inclusion de la nouvelle CSS3 calc() type valeur, cela pourrait être résolu beaucoup plus facilement. Quelque chose dans le sens de:
.width-12 > .panel{ width: 100%; }
.width-09 > .panel{
width: calc(75% - 10px);
margin: ...;
}
J'ai un peu de Javascript de bugs, j'ai piraté quelques trucs qui "fonctionne", mais je suis sur une quête. Espérons-le, le lieu le plus sacré du graal existe.
La solution suivante, et l'un @avall (bien qu'certainement un bon choix sur la simplification) ne sont malheureusement pas ce que je cherche. Le principal problème étant, les marges ne sont pas répartis uniformément entre les colonnes.
La seule façon que je peux voir ce travail est la réduction de l' .panel rembourrage 5px et quelque chose comme:
.column:first-child > .panel {
padding-left: 0px;
}
.column:last-child > .panel {
padding-right: 0px;
}
/* not necessary? in any case, haven't tested */
.column:only-child > .panel {
padding-right: 0px;
padding-left: 0px;
}
Cette solution n'est pas acceptable, seulement parce que IE8 ne parvient pas à reconnaître l' :last-child (et en :only-child) pseudo-sélecteurs.
