Divs side by side and divs

Version imprimable

1 pièce(s) jointe(s)

Hi,

Can someone help me doing this part of maquette with html/css:
Pièce jointe 391091

I do write this code but it doesn't work correctly
html:

Code:

1
2
3
4
5
6
7
8
9
10
11
<hr>
				<div>
					<div class="left-part"><h6>Le projet est <span class="important-numbers">26 </span></h6></div><div><h6 class="grey-text">jours en retard</h6></div>
				</div>
				<div class="right-part">
					<div class="left-part">
						<div><h6>Fin prévue</h6></div>
						<div><p class="grey-text">17/02/2018</p></div>
					</div>
					<div class="left-part"><span class="important-numbers">5 </span></div><div><h6 class="grey-text">jours en avance</h6></div>
				<hr>

Css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	.important-numbers{
		font-weight: bolder;
		font-size: 20px;
	}
 
	.grey-text{
		color: #C9C7C7;
		font-weight: normal;
	}
	.left-part{
		float: left;
		margin-right: 20px;
	}
	.right-part{
		float: right;
	}

Many thanks :D

24/06/2018, 13h47
Invité

Bonjour,

1- tu es sur un forum francophone.
Merci de t'exprimer en français.

2- explique ce qui ne fonctionne pas "correctement".

3- essaie les flexbox (display:flex)

4- display:table devrait aussi faire l'affaire.

1 pièce(s) jointe(s)

Bonjour

Je travaille sur une maquette en html/CSS et je veut arriver à ce résultat
Pièce jointe 391114

CE que j'ai écrit jusqu'à mainetenant ne me donne pas le resultat souhaité, voci mon code
html:

Code:

1
2
3
4
5
6
7
8
9
10
11
<hr>
				<div>
					<div class="left-part"><h6>Le projet est <span class="important-numbers">26 </span></h6></div><div><h6 class="grey-text">jours en retard</h6></div>
				</div>
				<div class="right-part">
					<div class="left-part">
						<div><h6>Fin prévue</h6></div>
						<div><p class="grey-text">17/02/2018</p></div>
					</div>
					<div class="left-part"><span class="important-numbers">5 </span></div><div><h6 class="grey-text">jours en avance</h6></div>
				<hr>

CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.important-numbers{
		font-weight: bolder;
		font-size: 20px;
	}
 
	.grey-text{
		color: #C9C7C7;
		font-weight: normal;
	}
	.left-part{
		float: left;
		margin-right: 20px;
	}
	.right-part{
		float: right;
	}

24/06/2018, 15h03
psychadelic

comme-ça, ça va être compliqué, parce que visiblement tu as de mauvaises bases sur la compréhension du css..

tu devrai tout revoir en utilisant le modèle des flexbox, surtout si tu débute car il est bien plus simple à mettre en œuvre. ;)

Une solution : https://codepen.io/jreaux62/pen/bGdWpdQ

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="projet-fin-parts">
    <h6>
      <span>Le projet a </span>
      <span>26 </span>
      <span>jours en retard</span>
    </h6>
    <h6>
      <span>Fin prévue<br /><span>17/02/2018</span></span>
      <span>5 </span>
      <span>jours en avance</span>
    </h6>
</div>

Code:

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
.projet-fin-parts {
  display:flex;
}
.projet-fin-parts > h6 {
  flex:1 1 50%;
  display:flex;
  justify-content:center;
  font-size: 20px;
  font-family:Arial,sans-serif;
}
.projet-fin-parts > h6 span {
  display:inline-block;
  vertical-align:top;
}
.projet-fin-parts > h6 > span:first-child {
  text-align:right;
}
.projet-fin-parts > h6 > span:last-child,
.projet-fin-parts > h6 > span:first-child span {
  color: #C9C7C7;
	font-weight: normal;
  font-size: 80%; /* 80% de 20px */
}
.projet-fin-parts > h6 > span:nth-child(2) {
  font-weight: bold;
  font-size: 220%; /* 220% de 20px */
  padding:0 3px;
}