div problème de placement

Question

J'ai un conteneur div, qui contiendra 3 ou plus divs

<div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Maintenant, je veux placer div années comme

[container-div] 
    [1st div]  [2nd div]  [3rd div] 
    [4th div]  [5th div] 
[/container-div] 

Comment réaliser suivant?

Merci

Answer 1

Si vous voulez toujours 3 divs dans une ligne que vous pouvez ajouter une classe pour eux et leur style comme ceci:

.float { 
    float: left; 
    width: 33%; 
} 

Si vous voulez avoir des marges vous devriez les annoter aussi % et soustrayez la marge de la largeur.

Answer 2

<style type="text/css"> 
#one,#two,#three,#four,#five{ 
float:left; 
} 

.clearfix{ 
clear:both; 
} 

</style> 

<div id="container"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
    <div class="clearfix"></div> 
    <div id="four"></div> 
    <div id="five"></div> 
</div> 

essayez-

Answer 3

Trois façons que je peux penser. D'abord, vous pouvez utiliser float pour définir leur position (style = 'float: left/right'). Cependant, cela les amènera à déborder la div contenant, sauf si vous les suivez avec une autre div avec clear: both (<div style='clear:both'></div>), comme indiqué par Anish. Deuxièmement, vous pouvez utiliser une table ou la table de propriétés d'affichage, la ligne de table et la cellule de table. par exemple:

<div style='display:table'> 
    <div style='display:table-row'> 
    <div style='display:table-cell'>div 1</div> 
    <div style='display:table-cell'>div 2</div> 
    <div style='display:table-cell'>div 3</div> 
    </div> 
</div> 

Et enfin, vous pouvez utiliser la propriété d'affichage inline-block, qui supprime la linebreak à la fin de la div tout en vous permettant de garder la largeur fixe. par exemple:

<div style='display:inline-block;width:33%'>div 1</div> 
<div style='display:inline-block;width:33%'>div 2</div> 
<div style='display:inline-block;width:33%'>div 3</div> 
<br /> 
<div style='display:inline-block;width:33%'>div 4</div> 
<div style='display:inline-block;width:33%'>div 5</div>