Comment distribuer div sur toute la largeur d'un conteneur?

Je voudrais avoir « b » être également répartis le long de « a » comme cela:Comment distribuer div sur toute la largeur d'un conteneur?

[1  2   3  4]

Ce serait bien que s'il n'y a pas assez d'espace, puis « un » bloc s'étend à la ligne suivante . Voici la structure html, je voudrais, mais ce n'est pas fixe dans la pierre et peut être modifié.

<html> 
    <head> 
     <style> 
      .a { width: 100%; border: 1px solid; float: left; } 
      .b { width: 100px; border: 1px solid red; float: left;} 
     </style> 
    </head> 
    <body> 
     <div class'a'> 
      <div class='b'>1</div> 
      <div class='b'>2</div> 
      <div class='b'>3</div> 
      <div class='b'>4</div> 
     </div> 
    </body> 
</html>

Source

2009-07-20 Emmanuel Caradec

est ici une question très similaire avec assez bonnes réponses: http://stackoverflow.com/questions/674045/distribute-elements -evenly-using-css – peirix

De votre lien j'ai trouvé http://css-tricks.com/equidistant-objects-with-css/ qui est le plus proche d'une solution –

Am correct penser que vous voulez atteindre cet objectif:

[[1 ][ 2 ][ 3 ][ 4]]

pour donner essentiellement ce (avec le 'b' bordures masquées):

[1 2 3 4]

mais où vous avez un nombre arbitraire de articles internes de largeur fixe, et le conteneur externe est de largeur arbitraire?

Je ne suis pas sûr qu'il ya un moyen d'y parvenir sans entrer dans javascript :(

Source

2009-07-20 12:19:31

Je pense que vous êtes à la recherche pour les colonnes intelligentes comme celles décrites dans ce example en utilisant jQuery. Vous pouvez également essayer un live demo.

Source

2009-07-20 12:05:34

Que dites-vous est le problème? L'effet d'emballage ne fonctionne pas correctement lorsque la largeur de .a est inférieure à 400px? Je suppose que la hauteur de .a ne correspond pas au fond de la 4ème div .b dans ce cas. vous devrez peut-être ajouter un <br clear="all" /> après le .b à .a.

Source

2009-07-20 12:08:10

Peut-être que la meilleure chose serait de faire .b un bloc en ligne et de faire sa largeur de 100%.

Source

2009-07-20 12:14:29 rmarimon

Comment distribuer div sur toute la largeur d'un conteneur?

Répondre

Questions connexes