Discussion :

[Korega]

Bonjour, je code un site et voilà mon problème :

J'aimerais afficher des "previews" d'articles sur lesquelles on peut cliquer et interagir.
Pour cela je cherche à aligner les divs sur l'accueil comme sur la figure 1 mais j'obtiens le résultat de la figure 2.



Mon CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box 
{
    border: 0px solid black;
    background: white;
    text-align: center;
    float: left;
    width: 400px;
    margin-top: 20px;
    margin-left: 25px;
    margin-right: 15px;
    margin-bottom: 0;
 
    padding: 20px;
 
}

Merci d'avance à ceux qui voudront bien prendre le temps de me répondre

[Invité]

Bonjour,

• Flexbox
• A Complete Guide to Flexbox

[Skyxia]

Salutations,

Il aurait été préférable qu'on ai le HTML aussi (si possible) afin de voir l'ensemble.

Sinon je conseille d'utiliser le Grid system de Bootstrap

Cordialement.

[NoSmoking]

Bonjour,

Sinon je conseille d'utiliser le Grid system de Bootstrap

c'est peut être un peu excessif, sauf si cela s'inscrit dans un cadre plus général et encore.

Sur base du HTML suivant :

Code html :

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

1
2
3
4
5
6
7
8
9
<section class="wrapper">
  <article>#1</article>
  <article>#2</article>
  <article>#3</article>
  <article>#4</article>
  <article>#5</article>
  <article>#6</article>
  <article>#7</article>
</section>

CSS avec flex :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wrapper article {
  width: 32.5%;
  margin-bottom: 1em;
  min-height: 10em;
  border: 1px #ccc solid;
}

CSS avec grid :

Code :

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

1
2
3
4
5
6
7
8
9
.wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(10em,auto);
}
.wrapper article {
  border: 1px #ccc solid;
}

Le résultat est pratiquement identique le reste n'est qu'affaire de Media queries.

[Korega]

Merci pour toutes vos réponses ! Je vais essayer cela