Largeur du fluide avec des DIVs équidistants

Question

J'ai un conteneur de largeur fluide DIV.

Au sein de cela, j'ai 4 DIVs tous 300px x 250px ...

 <div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>
 

Ce que je veux arriver, c'est que la case 1 soit flottante à gauche, la case 4 à être flottante à droite et les cases 2 et 3 à être espacées uniformément entre elles. Je veux que l'espacement soit fluide aussi bien que le navigateur devienne plus petit l'espace devient plus petit aussi.

Answer 1

Voir: http://jsfiddle.net/thirtydot/EDp8R/

• Cela fonctionne dans IE6+ et tous les navigateurs modernes!
• J'ai réduit de moitié votre demande dimensions juste pour rendre les choses plus facile de travailler avec.
• text-align: justify combiné avec .stretch est ce qui est de la manipulation du positionnement.
• display:inline-block; *display:inline; zoom:1 correctifs inline-block pour IE6/7, voir ici.
• font-size: 0; line-height: 0 correction d'un problème mineur dans IE6.

HTML:

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <span class="stretch"></span>
</div>

CSS:

#container {
    border: 2px dashed #444;
    height: 125px;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3, .box4 {
    width: 150px;
    height: 125px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.box1, .box3 {
    background: #ccc
}
.box2, .box4 {
    background: #0ff
}

---

Les extra - span (.stretch) peuvent être remplacés par :after.

Cela fonctionne toujours de la même navigateurs comme la solution ci-dessus. :after ne fonctionne pas sous IE6/7, mais ils utilisent distribute-all-lines de toute façon, donc il n'a pas d'importance.

Voir: http://jsfiddle.net/thirtydot/EDp8R/3/

Il y a un inconvénient mineur pour :after: pour faire à la dernière ligne de travail parfaitement dans Safari, vous devez être prudent avec les espaces dans le code HTML.

Plus précisément, cela ne fonctionne pas:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

Et ce n':

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

---

Vous pouvez l'utiliser pour n'importe quel nombre d'enfants divs, sans ajouter un boxN classe à chacun par l'évolution de la

.box1, .box2, .box3, .box4 { ...

pour

#container > div { ...

Cela permet de sélectionner tous les div qui est le premier enfant de l' #container div, et pas d'autres en dessous. De généraliser les couleurs d'arrière-plan, vous pouvez utiliser le CSS3 nième ordre du sélecteur, même si c'est uniquement pris en charge dans IE9+ et les autres navigateurs modernes:

.box1, .box3 { ...

devient:

#container > div:nth-child(odd) { ...

Voir ici pour un jsfiddle exemple.

Answer 2

La façon la plus simple de faire ça maintenant, c'est avec un flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Le CSS est alors simplement:

#container {
    display: flex;
    justify-content: space-between;
}

démo: http://jsfiddle.net/QPrk3/

Cependant, ce n'est actuellement pris en charge par la relativement récente des navigateurs (http://caniuse.com/flexbox). Aussi, la spec pour flexbox la disposition a été modifiée à quelques reprises, il est donc possible de couvrir de plus en plus de navigateurs, en plus, y compris une ancienne syntaxe:

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

Answer 3

Si css3 est une option, cela peut être fait en utilisant le css calc() fonction.

Cas 1: justification des cases sur une seule ligne ( VIOLON )

Le balisage est simple - un tas de divs avec certains é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 de fixer une IE9+ calc/arrondi bug - voir ici

Cas 2: justification des boîtes sur plusieurs lignes ( VIOLON )

Ici, en plus de l' calc() fonction media queries sont nécessaires.

L'idée de base est de mettre en place une media query pour chaque #colonnes unis, où je puis utiliser calc() pour travailler sur la marge de droite sur chacun des éléments (à l'exception de ceux dans la dernière colonne).

Cela ressemble à beaucoup de travail, mais si vous êtes en utilisant plus ou SASS cela peut se faire assez facilement

(Il peut encore être fait avec css normal, mais alors vous aurez à faire tous les calculs à la main, et puis si vous changez la largeur de la zone -, vous avez à travailler à nouveau le tout)

Ci-dessous un exemple d'utilisation de MOINS de: (Vous pouvez copier/coller ce code ici de jouer avec elle, [c'est aussi le code que j'ai utilisé pour générer le ci-dessus mentionné violon])

@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 boîte de largeur et un minimum de marge que vous souhaitez entre les cases.

Avec cela, vous pouvez savoir combien d'espace vous avez besoin pour chaque état.

Ensuite, utilisez calc() pour calcuate la marge de droite, et nth-child pour supprimer la marge de droite des cases dans la dernière colonne.

L' avantage de cette réponse au cours de la accepté de répondre qui utilise text-align:justify , c'est que lorsque vous avez plus d'une rangée de boîtes les boîtes sur la dernière rangée de ne pas se "justifier" par exemple: Si il y a 2 cases restantes sur la dernière rangée - je ne veux pas la première case de gauche et que le suivant sur la droite -, mais plutôt que les cases se suivent dans l'ordre.

Concernant la prise en charge du navigateur: Ce sera le travail sur IE9+,Firefox,Chrome,Safari6.0+ - (voir ici pour plus de détails) Cependant j'ai remarqué que sur IE9+, il y a un peu d'un problème entre les médias requête unis. [si quelqu'un sait comment résoudre ce problème que je voudrais vraiment savoir :) ] <-- FIXE ICI

Answer 4

Si vous connaissez le nombre d'éléments par "ligne" et la largeur du conteneur, vous pouvez utiliser un sélecteur pour ajouter une marge aux éléments dont vous avez besoin pour donner un aspect justifié.

J'ai eu des rangées de trois divs que je voulais justifié donc utilisé le:

.tile:nth-child(3n+2) { margin: 0 10px }

ceci permet au div central dans chaque rangée d'avoir une marge qui force les divs 1 et 3 aux bords extérieurs du récipient

Aussi idéal pour d'autres choses comme les couleurs de fond des bordures, etc.

Answer 5

en jQuery vous pouvez cibler les Parents directement.

CECI EST UTILE SI VOUS NE SAVEZ PAS EXACTEMENT COMBIEN D'ENFANTS SERONT AJOUTÉ DYNAMIQUEMENT, ou SI VOUS ne POUVEZ PAS comprendre LEUR NOMBRE.

var tWidth=0;

$('.children').each(function(i,e){
tWidth += $(e).width();

///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);

})
$('#parent').css('width',tWidth);

Cela permettra à l' parent développer horizontalement comme l' children sont beng ajouté.

NOTE: Ceci suppose que l' '.children' ont un width et Height Ensemble

Espérons que cela Aide.