Discussion :

[abir84]

Bonjour,
J'ai 4 div contenu dans une div mere "question", que je dois aligner horizontalement. Il faut que la 1ere div contien le label de la question, parsuite une div pour le choix1, une div pour les radio bouttons au centre et une div pour le 2eme choix.
voici ma css :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.question {
    margin-top: 2px;
     border:solid 1px black;
     width:970px;
     margin-left:5px;
     color: #12377C;
     min-height : 50px;
	 }
.question_text {
   line-height:20px;
   border: solid 1px silver;
   width:30px;
   margin-left: 1px;
   margin-top : 10px;
   text-align: center;
   float:left;
}
.choice_1 {
   position:aboslute;
    text-align: right;
    width:425px;    
    line-height:20px;
    border : solid 1px blue;
    margin-top : 10px;
    margin-left:33px;
}
.radios{
    ostion: absolute;
    width:80px; 
    line-height:20px;
    border : solid 1px aqua;
    margin-left:461px;
    margin-top : 10px;
    text-align : center;
    float:left;
}
.choice_2 {
    text-align: left;
    line-height:20px;
    border : solid 1px blue;
    width:423px;
    margin-top : 10px;
    margin-left: 543px;
}
.clear {clear:both;}

et un aperçu de l'html :

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
<div class="question">
            <div class="question_text">
#numero question
</div>
            <div class="choice_1">
             #code du choix 1
            </div>
             <div class="radios"> 
         #radio_button
             [ou]
             #radio_button
             </div>
              <div class="choice_2">
                #code du choix 2 (peut s'etaler sur deux lignes)
            </div>
        </div>
        <div class="clear"></div>

J'ai essayé avec le float left mais si je mets un float dans deux div successives, ça s'eparpille n'importe comment...
Le div "question sera répétée 4 fois dans la page, donc mes radio_buttons doivent etre alignés verticalement.

[mLk92]

T'a tenté un display: inline ?

[abir84]

Bonjour,
J'ai mis postition a absolute et float à left et ça marche :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.question {
    margin-top: 2px;
     border:solid 1px silver;
     width:970px;
     margin-left:5px;
     color: #12377C;
     height : 100px;
 
	 }
.question_text {
    position:absolute;
   line-height:20px;
   width:30px;
   margin-left: 1px;
   margin-top : 10px;
   text-align: center;
   float:left;
}
.choice_1 {
   position:aboslute;
    text-align: right;
    width:425px;    
    line-height:20px;
    margin-top : 10px;
    margin-left:33px;
    float:left;
}
.radios{
    position: absolute;
    width:80px; 
    line-height:20px;
    margin-left:461px;
    margin-top : 10px;
    text-align : center;
    float:left;
}
.choice_2 {
    position:absolute;
    text-align: left;
    line-height:20px;
    width:423px;
    margin-top : 10px;
    margin-left: 543px;
    float:left;
}
.clear {clear:both;}

Merci