Mise en page CSS pour édition PDF
Bonjour,
J'ai essayé tout un tas de choses pour avoir un rendu comme celui-ci sans succès :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ---------------
Header
---------------
Bloc du haut
---------------
Trucs | Détail
|
|
---------------
Saut de page
--------------------------
Header
--------------------------
Suite | Suite
Trucs | Détail
Éventuelle | Éventuelle |
Avez-vous une solution miracle ? Ce code sert pour la génération d'un PDF en utilisant thymeleaf et weasyprint.
A noter aussi que Trucs doit faire 25% de la page et Détail 75% (du coup column-count ne fait pas l'affaire :()
Un extrait du code HTML :
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
| <header>
<div style="width: 100%;">
...
</div>
</header>
<!-- Bloc du haut -->
<div class="color-light-blue" style="font-family: 'Montserrat Semi-Bold';font-size: 22pt;font-weight: bold;display: inline-block;margin-bottom: 10px;">
<span th:text="${program.get('title')}">Title program</span>
</div>
<div class="color-dark-blue" style="font-family: 'Montserrat Light';font-size:14pt;display: inline-block;margin-bottom: 10px;">
<span th:text="${program.get('goal')}">Goal program</span>
</div>
<div>
<img src="Capture-3.png">
</div>
<!-- Fin bloc du haut -->
<div class="row">
<!-- Trucs -->
<div class="column left">
...
</div>
<!-- Fin trucs -->
<!-- Détail -->
<div class="column right">
...
</div>
<!-- Fin détails -->
</div> |
Merci d'avance pour votre aide
