Positionner des div ayant un largeur fixe mais une hauteur aléatoire

**nicolassd** · 15/11/2023, 15h21

Bonjour à tous,

J'aimerai pouvoir positionner des divs les uns sous les autres sans grilles qu'il se touche (ou presque) peut importe leur hauteur et que l'utilisateur puisse également changer la position de ces divs (donc avec order en css ?)

Comme ceci (sur grand écran ça pourrait s'afficher sur 2 colonnes voir plus et sur mobile les uns sous les autres)

Nom : demande.png
Affichages : 192
Taille : 23,1 Ko

Nom : demande.png
Affichages : 192
Taille : 23,1 Ko

Avez-vous une idée ?

Merci !

**mathieu** · 16/11/2023, 03h58

essayez avec la mise en page flex :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ensuite vous pouvez indiquer des ordres différents en css en fonction de la largeur de l'écran.

**nicolassd** · 16/11/2023, 09h39

Bonjour Mathieu,

Merci pour votre réponse, c'est pas tout à fait ce que j'attends, j'avais déjà testé Flex, à moins que je l'utilise mal.

Voici le résultat :

Nom : Capture d’écran 2023-11-16 à 09.35.33.png
Affichages : 106
Taille : 600,9 Ko

Nom : Capture d’écran 2023-11-16 à 09.35.33.png
Affichages : 106
Taille : 600,9 Ko

Voici le code :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Test Flex</title>
        <base href="/">
        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
 
    <style>
        .Blocks {
            display: flex;
            flex-direction: row;
            flex-grow: 4;
            flex-wrap: wrap;
            flex-flow: row wrap;
            flex-basis: 2px;
        }
        .Block {
            align-self: self-start;
            margin: 4px;
            background-color: #FF0000;
            color: #FFFFFF;
            width: 400px;
        }
 
        .B1 {
            order: 1;
            height: 200px;
        }
 
        .B2 {
            order: 2;
            height: 350px;
        }
 
        .B3 {
            order: 3;
            height: 50px;            
        }
 
        .B4 {
            order: 4;
            height: 200px;            
        }
 
        .B5 {
            order: 5;
            height: 500px;            
        }
    </style>
 
    <body>
        <div class="Blocks">
            <div class="Block B1">Order 1</div>
            <div class="Block B2">Order 2</div>
            <div class="Block B3">Order 3</div>
            <div class="Block B4">Order 4</div>
            <div class="Block B5">Order 5</div>
        </div>
    </body>
</html>

Et voici ce que je souhaiterai :

Nom : 2 - Capture d’écran 2023-11-16 à 09.35 2_.png
Affichages : 106
Taille : 147,4 Ko

**Pytet** · 16/11/2023, 09h58

Bonjour,

Tu peux regarder la mise en page appelée "masonry" :
https://jenseign.com/apprendre-html-...eorie/masonry/
https://developer.mozilla.org/en-US/...Masonry_layout
https://css-tricks.com/piecing-toget...asonry-layout/

**nicolassd** · 16/11/2023, 10h35

Bonjour Pytet,

Merci beaucoup, je ne connaissais pas.

Je suis sous Angular (16) j'ai donc installé le package masonry : https://www.npmjs.com/package/ngx-masonry

Voici le résultat

Nom : Capture d’écran 2023-11-16 à 10.32.19.png
Affichages : 96
Taille : 305,8 Ko

Nom : Capture d’écran 2023-11-16 à 10.32.19.png
Affichages : 96
Taille : 305,8 Ko

Par contre pas moyen de mettre dans le bon order a priori (je vais voir pour les positionner via du code et non par html/css).

Si quelqu'un a encore mieux je suis preneur !

Merci!!

Positionner des div ayant un largeur fixe mais une hauteur aléatoire

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager