Mise en place de flex

**moimp** · 25/02/2019, 17h16

Bonjour à tous,
Pour info: En vue de réaliser une version imprimable, j'utilise un formulaire dont tous les champs sont affectés de l'attribut disabled afin de distinguer le css des étiquettes et le contenu des champs.

Mon problème est d'arriver à imbriquer une disposition horizontale secondaire dans la disposition verticale générale. J'ai étudié plusieurs tutos mais je n'y arrive pas.
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
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
<body>
 
	<form method="post" action="" class="XL displCard">
		<p><input type="submit" value="Imprimer" onclick="window.print();" /> <input type="submit" value="Retour" formaction="http://omnes.proginet.local/parentPage.php?childPageKey=3" /></p><br/>
		<fieldset><legend>Chef de famille</legend>
			<div class="multiCols">
				<div class="div1">
					<label>Prénom</label><input type="text" value="Sophie" disabled /><br/>
					<label>Nom</label><input type="text" value="Duval" disabled /><br/>
					<label>Adresse</label><textarea cols="28" rows="4" disabled>500, route du Vieux Machin
Lieudit Ici
FR-00000 Saint Village</textarea><br/>
				</div>
				<div class="div2">
					<label>Tél. domicile</label><input type="text" value="0123456789" disabled /><br/>
					<label>Tél. portable</label><input type="text" value="0612345678" disabled /><br/>
					<label>Tél. travail</label><input type="text" value="" disabled /><br/>
					<label>Courriel</label><input type="text" value="" disabled /><br/>
				</div>
			</div>
		</fieldset>
				<fieldset><legend>Conjoint</legend>
			<div class="multiCols">
				<div class="div1">
					<label>Prénom</label><input type="text" value="David" disabled /><br/>
					<label>Nom</label><input type="text" value="Nom" disabled /><br/>
				</div>
				<div class="div2">
					<label>Tél. portable</label><input type="text" name="tel_portable" value="" disabled /><br/>
					<label>Tél. travail</label><input type="text" name="tel_travail" value="" disabled /><br/>
					<label>Courriel</label><input type="text" name="courriel" value="lui@wanadoo.fr" disabled /><br/>
				</div>
			</div>
		</fieldset>
						<fieldset><legend>Enfants</legend>
			<table>
				<tr><th>Prénom</th><th>Nom</th><th>Date de naissance</th></tr><tr><td>Mathilde</td><td>Nom</td><td>01/11/2011</td></tr><tr><td>Timothée</td><td>Nom</td><td>07/03/2016</td></tr>			</table>
		</fieldset>
			</form>
 
</body>

Dans cette structure, je souhaite avoir une disposition générale verticale.
Les div enfants des div avec la classe multicols, doivent eux être disposés horizontalement.
Après avoir lu plusieurs tutos sur le sujet, j'ai écrit le css suivant mais à l'intérieur de la disposition verticale générale, je bloque sur la disposition en rangées de la classe multicols:

Code css :

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

1
2
3
4
5
6
7
8
form {
	display:flex;
	flex-direction:column;
}
.multicols {
	display:flex;
	flex-direction:row;
}

**NoSmoking** · 25/02/2019, 21h12

Bonjour,
sans aller plus loin :

Code html :

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

<div class="multiCols">

et

Code css :

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

.multicols {

multicols != .multiCols

Mise en place de flex

Positionnement en CSS avec flexbox

Vue hybride

Discussions similaires

Partager

Partager