répartire l'espace libre equitablement entre les éléments

**tims12** · 03/05/2012, 18h45

Bonjour,

Voici mon problème, j'ai 3 buttons de taille dynamique (car internationalisation) disposés horizontalement sur ma page. Ce qui donne ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 _ _ _ _ _ _ _ _ _   _ _ _ _ _ _ _ _ _ _ _ _ _ _   _ _ _ _ _
|                 | |                           | |         |
|    BUTTON1      | |          BUTTON2          | | BUTTON3 |    espace libre
|_ _ _ _ _ _ _ _ _| |_ _ _ _ _ _ _ _ _ _ _ _ _ _| |_ _ _ _ _| -------------------- ...

J'aimerai pouvoir faire en sorte que l'espace libre vienne séparer ces buttons équitablement. En d'autre terme j'aimerai faire en sorte que les buttons se trouve à égale distance les un par rapport aux autres et tout cela dynamiquement. Ainsi j'obtiendrai quelque chose comme ci-dessous:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 _ _ _ _ _ _ _ _ _              _ _ _ _ _ _ _ _ _ _ _ _ _ _              _ _ _ _ _
|                 |   espace   |                           |   espace   |         |
|    BUTTON1      |      A     |          BUTTON2          |      B     | BUTTON3 |
|_ _ _ _ _ _ _ _ _| ---------- |_ _ _ _ _ _ _ _ _ _ _ _ _ _| ---------- |_ _ _ _ _|
 
espace A = espace B

Voilà j’espère avoir correctement expliqué et merci de votre aide.

**elfamine** · 03/05/2012, 19h30

Bonjour,

y a probablement plus simple mais en attendant voila

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#main{width:100%;}
.col{width:33.3%; float:left;background-color:grey;}
p{text-align:center;}
.first p{text-align:left;}
.last p{text-align:right;}
</style>
</head>
<body>
 
<div id="main">
<div class="col first"><p><input type="button" value="    BUTTON1      "></p></div>
<div class="col"><p><input type="button" value="          BUTTON2          "></p></div>
<div class="col last"><p><input type="button" value=" BUTTON3 "></p></div>
</div>
</html>

**tims12** · 03/05/2012, 20h29

Effectivement ton code est parfait pour 3 buttons.

Mais je viens de me rendre compte que j'ai pas bien choisi mon exemple, j'aurai du mettre 5 buttons à la place de 3... Mille excuses

**elfamine** · 03/05/2012, 21h12

si c'est 5 je suppose qu'il va falloir adapter le code ; mettre 20% (100/5) au lieu de 33.3% (100/3) ...puis faudra certainement virer le code css concernant .last et .first...

Apres n'etant pas tres fan du % j'ai toujours l'impression de laisser les choses au hasard...résolution de l’écran, taille de la fenetre. Parmi les 5 quelle est la valeur la plus grande que peut prendre un bouton (en px)?

Invité · 03/05/2012, 21h25

Bonjour,
le plus simple est de mettre les boutons dans une simple <table>.
Même si ce n'est plus très "fashion", c'est au moins efficace !

Sinon, c'est possible en javaScript (moins simple).

Ou en css, avec les pseudo tables (CSS display Property) : Simuler des tableaux en CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
{ display:table; }
{ display:table-cell; }
{ display:table-row; }
...

**tims12** · 03/05/2012, 21h47

Malheureusement il ne suffit pas des les centrer car dans cet exemple, on peut voir l'espace entre le button1 et le button2 est différent de celui qui se trouve entre le button2 et le button3 même si je retire les classes first et last (classe que j'aimerai bien garder d'ailleur).

Par ailleur, je ne sais pas quel sera la taille de mon plus grand buttons car le caption du button changera en fonction de la langue de l'utilisateur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         #main{width:100%;}
         .col{width:20%; float:left;background-color:grey;}
         .first {text-align:left;}
         .middle {text-align:center;}
         .last {text-align:right;}
      </style>
   </head>
   <body>
      <div id="main">
         <div class="col first"><input type="button" value="BUTTON1"></div>
         <div class="col middle"><input type="button" value="BUTTON2"></div>
         <div class="col middle"><input type="button" value="BUTTON3 grand label pour mon button"></div>
         <div class="col middle"><input type="button" value="BUTTON4"></div>
         <div class="col last"><input type="button" value="BUTTON5"></div>
      </div>
   </body>
</html>

**tims12** · 03/05/2012, 22h02

Ah une nouvelle réponse entre temps ^^

Je vous remercie pour votre aide

Le hic est que, d'après la doc, les anciennes versions de IE sont incompatible avec le style css des "tableaux". Mais je vais tester.
J'avais essayé aussi de mettre les buttons dans un tableau et j'ai eu le même problème que ci-dessus à savoir que les espaces entre les buttons était différents.

**elfamine** · 03/05/2012, 22h05

dans ce cas on pourrait mettre ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
                .first,
		.last{width:auto;}

Invité · 03/05/2012, 22h43

Voici un script Jquery :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Script initialisation jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var Wtotal = $('#main').width(); // largeur totale
		var i = 0;
		var Wbt = 0;
		$('.col').each(function(){
			i++;
			Wbt += $(this).width(); // ajoute la largeur du div
		});
		var esptotal = (Wtotal-Wbt); // espace total
		var nbreesp = (i-1) // nombre d'espaces
		// calcul de l'espace entre chaque div
		var espace = Math.floor(esptotal/nbreesp)-4; // -4 : prend en compte les border (je crois !?)
		// margin à droite
		$(".col").css("margin-right",espace+'px');
		$(".last").css("margin-right",'0px');
	});
</script>

Le CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
* {margin:0; padding:0;}
#main{width:1000px; background-color:yellow; margin:0 auto; }
.col{display:inline; margin:0; padding:0; }

Le html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="main">
	<div class="col first"><input type="button" value="1er BUTTON1"></div>
	<div class="col"><input type="button" value="2ème BUTTON2"></div>
	<div class="col"><input type="button" value="BUTTON3 grand label pour mon button"></div>
	<div class="col"><input type="button" value="autre BUTTON4"></div>
	<div class="col last"><input type="button" value="encore un BUTTON5"></div>
</div>

**tims12** · 05/05/2012, 17h41

Ça fonctionne impec avec le code jquery merci

répartire l'espace libre equitablement entre les éléments [CSS 2.1]

CSS

Discussions similaires

Partager

Partager