Discussion :

[aperdemak]

Bonjour j'ai plusieurs div qui s'empilent vers le bas et j'aimerais que dans l'une d'elle un élément flotte à droite mais quand je fais ça les div qui suivent remontent à gauche de l'élement qui flotte. Y aurait il une méthode pour ce type de mise en page sans utiliser de float clear ?
Merci d'avance.

DIVG
DIVG
DIVG-----DIGD
DIVG

et je voudrais
DIVG
DIVG
-------------DIVD
DIVG
DIVG

[headmax]

Salut pour se passer de float ou de clear il y a la margin-right margin-left qui complétera pour obtenir 100% de la width de la page, le mieux c'est un exemple : tu peux utiliser la propriété CSS calc(100% - difference en px) pour être sur du calcul du pourcentage.

Html :

Code html :

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

1
2
3
4
5
<div class="gauche">1</div>
<div class="gauche">2</div>
<div class="gauche">3</div>
<div class="droite">4</div>
<div class="gauche">5</div>

Css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.droite{
  background-color:blue;
  width:50%;
  margin-left:50%;
}
.gauche{
  width:50%;
  background-color:yellow;
  margin-right:50%;
}

Démo :
https://codepen.io/headmax/pen/ZaaWjy

[NoSmoking]

Bonjour,

Y aurait il une méthode pour ce type de mise en page sans utiliser de float clear ?

peut être en revoyant la structure de la page, mais
pourquoi vouloir s'en passer à tout prix ?

[Invité]

Bonjour,

une solution :

Code html :

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

1
2
3
4
5
6
7
<div id="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="droite">4</div>
  <div>5</div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#wrapper {
  display:-webkit-flex; display:flex; 
  -webkit-flex-direction:column; flex-direction:column; 
  -webkit-justify-content:flex-start; justify-content:flex-start; 
}
#wrapper > div {
 -webkit-flex:0 0 50%; flex:0 0 50%; 
 width:50%; 
 background-color:yellow;
}
#wrapper > div.droite {
  /*margin-left:50%;*/
  -webkit-align-self:flex-end; align-self:flex-end; 
  background-color:lightblue;
}

[NoSmoking]

Salut Jérôme,
peut être plus judicieux d'utiliser align-self: flex-end pour l'élément allant à droite.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#wrapper > div {
  flex: 0 0 50%;
  width: 50%;
  background-color: yellow;
}
#wrapper > div.droite {
  align-self: flex-end;
  background-color: lightblue;
}

[Invité]

Tout-à-fait !

J'avais zappé cette instruction !
Je n'ai pas bien lu le guide flexbox jusqu'au bout

C'est décidément très puissant...