IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Aligner vers le haut des div


Sujet :

Positionnement en CSS

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Septembre 2009
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2009
    Messages : 9
    Points : 7
    Points
    7
    Par défaut Aligner vers le haut des div
    Bonjour,
    je souhaiterais pouvoir aligner plusieurs div vers le haut d'un conteneur.
    En effet ma page possède un conteneur de taille fixe rempli de div d'une longueur défini (soit 1/3 du conteneur) mais de hauteurs différentes.
    Je voudrais que les div soient aligné vers le haut et collé les uns aux autres mais je n'y arrive pas avec les fonctions float ou inline-block...

    Merci de vos réponses.

  2. #2
    Membre confirmé
    Avatar de Jacques Beauregard
    Homme Profil pro
    Développeur Java
    Inscrit en
    Mai 2015
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Conseil

    Informations forums :
    Inscription : Mai 2015
    Messages : 231
    Points : 595
    Points
    595
    Par défaut
    Bonjour,

    Peux-t-on avoir le code HTML ?
    Merci

    Edit : en attendant ton code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div style="width:500px">
        <div class="bloctest" style="height:100px;">bloc 1</div>
        <div class="bloctest" style="height:150px;">bloc 2</div>
        <div class="bloctest" style="height:200px;">bloc 3</div>  
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .bloctest{
        width:33%;
        background-color:green;
        float:left;
    }
    Ceci aligne horizontalement 3 <div> de hauteur différente en haut d'un conteneur <div>
    Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...

    Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Septembre 2009
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2009
    Messages : 9
    Points : 7
    Points
    7
    Par défaut
    Le problème étant que je ne connais pas le nombre de div ni la hauteur de chacun tout cela dépend des actions de l'utilisateur.
    Je pense avoir une solution avec la propriété column-count à voir le résultat.

  4. #4
    Membre actif
    Avatar de friendofweb
    Homme Profil pro
    Amateur en informatique
    Inscrit en
    Mai 2015
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Amateur en informatique
    Secteur : Santé

    Informations forums :
    Inscription : Mai 2015
    Messages : 153
    Points : 244
    Points
    244
    Par défaut
    Bonjour, encore une fois, intéressant ! Par contre, si on affiche les bordures des div, la div 3 passe à la ligne, question de largeur ?
    http://codepen.io/anon/pen/VvwRze
    N'oubliez pas la documentation... - Initiation à HTML5 - Tutos CSS

  5. #5
    Membre confirmé
    Avatar de Jacques Beauregard
    Homme Profil pro
    Développeur Java
    Inscrit en
    Mai 2015
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Conseil

    Informations forums :
    Inscription : Mai 2015
    Messages : 231
    Points : 595
    Points
    595
    Par défaut
    Oui car une bordure a, par définition, une largeur (border-width)
    Exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    border : 1px solid silver
    Ce qui donne 2 pixel de largeur supplémentaires (1 pixel à gauche à gauche et 1 pixel à droite de l'élément HTML)
    Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...

    Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  6. #6
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #troiscolonnes { width:600px; 
      -webkit-columns:3;
      -moz-columns:3;
      columns:3; 
    }
    #troiscolonnes > div { 
      overflow:hidden; /* nécessaire pour ne pas couper un bloc */
      border:1px solid #ccc; 
      padding:5px;
      margin:0 0 10px 0;
    }

    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
    <div id="troiscolonnes">
        <div>bloc 1 fg sdfgdfg sdgfsdfg sdfgsdfg sdfg</div>
        <div>bloc 2 uyli ul tuil tu</div>
        <div>bloc 3 sdfgsd hjty sratzeaz eteartaert aertaert aertaert aetraertert aert </div>  
       <div>bloc 1 fg sdfgdfg sdgfsdfg sdfgsdfg sdfg</div>
        <div>bloc 2 uyli ul tuil tu</div>
        <div>bloc 3 sdfgsd hjty sratzeaz eteartaert aertaert aertaert aetraertert aert </div>  
       <div>bloc 1 fg sdfgdfg sdgfsdfg sdfgsdfg sdfg</div>
        <div>bloc 2 uyli ul tuil tu</div>
        <div>bloc 3 sdfgsd hjty sratzeaz eteartaert aertaert aertaert aetraertert aert </div>  
       <div>bloc 1 fg sdfgdfg sdgfsdfg sdfgsdfg sdfg</div>
        <div>bloc 2 uyli ul tuil tu</div>
        <div>bloc 3 sdfgsd hjty sratzeaz eteartaert aertaert aertaert aetraertert aert </div>  
    </div>

  7. #7
    Membre actif
    Avatar de friendofweb
    Homme Profil pro
    Amateur en informatique
    Inscrit en
    Mai 2015
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Amateur en informatique
    Secteur : Santé

    Informations forums :
    Inscription : Mai 2015
    Messages : 153
    Points : 244
    Points
    244
    Par défaut
    N'oubliez pas la documentation... - Initiation à HTML5 - Tutos CSS

  8. #8
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Bonjour,
    Citation Envoyé par Jacques Beauregard Voir le message
    Ce qui donne 2 pixel de largeur supplémentaires (1 pixel à gauche à gauche et 1 pixel à droite de l'élément HTML)
    sauf si l'on prend soin de mettre la propriété/value box-sizing:border-box sur l'élément, dans ce cas ses width et height prennent en compte la marge intérieure et la bordure.

Discussions similaires

  1. alignement des div
    Par -Neo- dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 19/03/2008, 16h59
  2. Alignement des divs
    Par k-koo dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 15/01/2008, 20h56
  3. Aligner des div horizontalement
    Par abir84 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/12/2007, 16h02
  4. Site web à CSSiser (passer d'une mise en page tableau vers des <div>)
    Par brunoqcfr dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 23/09/2007, 13h04
  5. Aligner des <div>
    Par Sourrisseau dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 10/12/2006, 20h44

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