Discussion :

[fidbell84]

Bonjour

je veux mettre 3 div sur la même ligne et soit que les div soit responsives:

voila mon code:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="all">
      <div class="bloc1">
             la première bloc à gauche
      </div>
 
      <div class="bloc2">
             le bloc au milieu
      </div>
 
      <div class="bloc3">
             le bloc à droite
      </div>
</div>

et le css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.all{
	   width: 100%;
	}
	.bloc1{
		float: left;
	}
	.bloc2{
		float: center;
	}
	.bloc3{
		float: right;
	}

[www.diazis.com]

Bonjour,

Il faut mettre tes 3 div en
display: inline-block;
et leur donner une taille soit fixe (ils s'entasseront en fonction de l'écran) soit proportionnelle (ils diminueront en fonction de l'écran).
Enlever les float

[fidbell84]

Merci pour la réponse

mais est ce que je dois mettre dans chaque div car lorsque j'ai mis que dans la div all seulement les deux bloac à gauches sont aligné.

voila le code pour soit tous alignés.

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
.all{
		background-color: red;
       display: inline-block;
	   width: 100%;
	}
	.bloc1{
	    display: inline-block;
		float: left;
	}
	.bloc2{
		 display: inline-block;
		float: center;
	}
	.bloc3{
		display: inline-block;
		float: right;
	}

[www.diazis.com]

Pour voir le principe (en proportionnel), essai ça :

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
22
23
24
 
.all{
  background-color: red;
  width: 100%;
  height: 20px;
}
.bloc1{
  background-color: yellow;
  display: inline-block;
  width: 30%;
  height: 10px;
}
.bloc2{
  background-color: blue;
  display: inline-block;
  width: 30%;
  height: 10px;
}
.bloc3{
  background-color: green;
  display: inline-block;
  width: 30%;
  height: 10px;
}

remplace le width des blocs avec des valeurs fixe pour voir l'empilement selon l'écran

[fidbell84]

oui c'est fonctionnelle;
mais je voudrais que le height de deux bloc à gauche et à droite soit fixe (hauteur d'écran).

Remaque j'ai ecrit dans le div à gauche il s'ecrit au dessous de div comment faire aussi pour le mettre en haut.
(est ce que j'utilise padding)??

[www.diazis.com]

Dans l'exemple j'avais mis les height à 10px
Mets les height de 1 et 3 à 100% et enlève le height de 2 (ou mais le à la taille que tu souhaites).

[fidbell84]

voila ce que j'ai abbouti

[www.diazis.com]

tu peux rajouter à tes 3 blocs :
vertical-align: top;

et dans all (et ses parents s'il y en a):
min-height: 100%

[NoSmoking]

Bonjour,
tu l'as trouvé où cette valeur pour float ?

Code :

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

1
2
3
bloc2{
   float: center;
}