Discussion :

[totofe]

Bonjour,

J'ai des difficultés a effectué ma mise en page. Voilà ce que je voudrais obtenir:



voici mon code Html :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="card-event">
                            <span  class="info-user-event">
                                <img src="avatar.png" />
                                <span class="info-user-header">
                                    <span class="info-user-title">totofe2</span>
                                    <span class="info-user-age">16 ans</span>
                                </span>
                                <span class="info-date-event">  17:00 </span> 
                            </span>
                             <span class="info-event">
                                 <span class="title-event"><img ng-src="img/icon_type/1.png"> Titre heure2  </span>
                             </span>
                        </div>

et mon code CSS:

Code CSS :

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
47
48
 
.card-event {
background-color: #fff;
}
 
 
.info-user-event{
 
    display:inline;
}
 
.info-user-event img:first-child{
 
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float: left;
}
 
.info-user-header{
    display:inline-block;
    width:100%;
    height:100%;
    padding-left: 10px;
    padding-right: 90px;
}
 
 
.info-user-title {
    display:block;     
    max-width:100%;
 
}
 
.info-user-age{
    color: #bebebe;   
    display: inherit;
    overflow: hidden;
   -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width:100%;
}
 
.title-event img{
 
      max-height:20px;
      max-width:20px;
  }

Et voici mon rendu:



Je ne comprend pas trop le fonctionnement des display. Pouvez vous m'aider?