1. #1
    Membre du Club
    Profil pro
    Inscrit en
    février 2012
    Messages
    71
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2012
    Messages : 71
    Points : 51
    Points
    51

    Par défaut Priopriété div parmi flottant

    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

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur multimédia
    Inscrit en
    juillet 2004
    Messages
    680
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur multimédia
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2004
    Messages : 680
    Points : 1 139
    Points
    1 139

    Par défaut

    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

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 005
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 005
    Points : 32 169
    Points
    32 169

    Par défaut

    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 ?

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 581
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 581
    Points : 21 188
    Points
    21 188

    Par défaut

    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;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 005
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 005
    Points : 32 169
    Points
    32 169

    Par défaut

    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;
    }

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 581
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 581
    Points : 21 188
    Points
    21 188

    Par défaut

    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...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. regex capturer une div parmis d'autres
    Par guest4541 dans le forum Regex
    Réponses: 6
    Dernier message: 22/07/2016, 15h00
  2. Style sur première div parmis d'autres
    Par guest4541 dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 21/07/2016, 21h21
  3. Déterminer le dernier DiV parmi plusieurs DIV
    Par xxnameless dans le forum jQuery
    Réponses: 3
    Dernier message: 15/07/2016, 20h06
  4. Afficher un seul div parmi tous ceux d'une page
    Par G-First dans le forum JavaScript
    Réponses: 0
    Dernier message: 14/04/2009, 11h21
  5. Image flottante et <div>
    Par KneXtasY dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 05/07/2005, 18h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo