Disposition 3 div

Version imprimable

09/04/2021, 09h27
charlieda

1 pièce(s) jointe(s)

Disposition 3 div

Bonjour à toutes et à tous,

J'utilise bootstrap et je bloque sur une disposition.

Voilà à quoi je voudrais arriver dans un container

Pièce jointe 595256

J'ai essayer col-sm-8 suivi d'un row et ce pour les deux div l'un en dessous de l'autre, ça fonctionne mais comme je peux faire pour mettre le bleu aligné horizontalement avec le rouge ?

Merci d'avance pour vos avis et aides.

Bonne journée ;)
09/04/2021, 09h59
javatwister

Bonjour,

Sur ton image, le bleu est centré verticalement par rapport au rouge et au vert. Est-ce vraiment ce que tu veux?
09/04/2021, 10h36
charlieda

Bonjour,

Merci pour ta réponse.

Oui c'est ce que je veux.

En fait c'est une zone texte donc je veux qu'elle soit plus haute que les deux autres.

Merci ;)

Ceci fonctionne mais il y a sans doute des dizaines de possibilités différentes:

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
#cadre {
	display:flex;
	align-items:center;
	width:80%;
	margin:auto;
}
#duo {
	height:400px;
	width:80%;
	margin-right:40px;
}
#duo div {
	margin-right:30px;
	margin-bottom:40px;
	width:100%;
	height:180px;
}
#red {
	background:red;
}
#lime {
	background:lime;
}
#blue {
	background:blue;
	width:20%;
	height:420px;
}

Code:

1
2
3
4
5
6
7
<div id="cadre">       
	<div id="duo">       
		<div id="red"></div>
		<div id="lime"></div>
	</div>       
	<div id="blue"></div>
</div>

09/04/2021, 21h30
charlieda

Un très grand merci.

Je l'ai mis à ma sauce et c'est parfait.

En fait, je cherchais une solution bootstrap pure mais pas trouvé.

Ca fonctionne c'est le le principal.

Merci