Calculer la largeur pour divs

Question

Dans l'exemple ci-dessous j'ai trois rangées (divs marqués avec .row) et la largeur de réglage à 33% pour les avoir la même taille et remplir toute la zone. Le problème est que ces divs .row sont générés dynamiquement et parfois au lieu de trois divs pourraient être quatre ou deux divs. Dans ce cas, comment définir la largeur? Par exemple si theer est deux divs, une largeur devrait être de 50% pour les deux.

<div class="membership-table"> 

     <div class="row"> 
      <div class="title"> 
       Personal One Year membership 
      </div>   
     </div> 


     <div class="row"> 
      <div class="title"> 
       Lifetime membership 
      </div>   
     </div> 


     <div class="row"> 
      <div class="title"> 
       Business One Month membership 
      </div>     
     </div> 

</div> 

.membership-table { text-align: center; } 

.membership-table .row { display: inline-block; margin: 0; padding: 0; width: 33%; } 

.membership-table .title { color: #c30000; font-size: 15px; font-weight: bold; } 

Answer 1

Si vous êtes à la recherche d'une solution CSS pure. Vous aurez besoin boîte-flex CSS3: http://designshack.co.uk/articles/css/farewell-floats-the-future-of-css-layout/

Mais cela ne fonctionnera pas dans les anciens navigateurs comme IE.

L'autre solution serait de le faire avec jQuery par exemple:

$(".membership-table .row").css("width", 100/$(".membership-table .row").length + "%") 

Cela va régler la largeur de chacune de vos lignes à 100/nombre de lignes.

Démo: http://jsfiddle.net/4zGxZ/1/

Answer 2

Peut-on utiliser un Jquery sur la page? Si oui:

J'ai modifié, car zéro divisé ne peut pas être possible (si aucune ligne en elle)

var divLength = $(".membership-table .row").length; 
if (divLength)>0 
{ 
    var divPercentage = 100/ divLength; 
    $('.membership-table .row').css('width',divPercentage+'%'); 
} 

Answer 3

La façon la plus simple serait d'utiliser Javascript, pour compter les lignes et modifier la tailles en conséquence. J'ai tendance à utiliser jQuery, et je utiliser quelque chose comme ce qui suit:

var rows = $('.membership-table .row'); 
rows.width((100/rows.length)+'%'); 

L'autre façon de le faire est côté serveur: lorsque les boucles script côté serveur à travers les lignes, ajoutez un nom de classe qui est définie dans la CSS pour avoir une certaine largeur. Par exemple, en PHP:

$rows = [row1, row2, row3...]; 
$count = count($rows); 
foreach ($rows as $row) { 
    echo '<div class="row count'.$count.'">'; 
    echo ' <div class="title">'; 
    echo '  Personal One Year membership'; 
    echo ' </div>'; 
    echo '</div>'; 
} 

Ensuite, dans votre CSS, ajoutez les éléments suivants:

.count1 { width:100%; } 
.count2 { width:50%; } 
.count3 { width:33%; } 
.count4 { width:25%; } 
.count5 { width:20%; } 

Et ainsi de suite, jusqu'à ce que vous atteignez le nombre maximum de colonnes que vous pourriez avoir. Vous aurez besoin de faire quelques contrôles de santé mentale, pour vous assurer que vos classes 'count' ne vont pas trop haut, mais quelque chose dans ce sens fonctionnerait.

Malheureusement, il n'y a pas moyen de faire des maths à la volée. C'est un module CSS3 (http://www.w3.org/Style/CSS/specs#math) mais il a très peu de soutien ou d'élan derrière les principaux navigateurs.