1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    mars 2006
    Messages
    20
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2006
    Messages : 20
    Points : 15
    Points
    15

    Par défaut [Bootstrap] Alignement de divs de tailles variables sur 2 colonnes

    Bonjour,
    dans un contexte Bootstrap, j'ai une série de divs de largeur constante span6 à l'intérieur d'un span12, mais dont la hauteur peut varier. Les divs sont bien organisées sur 2 colonnes, mais " de temps en temps" bootstrap en met deux en vis à vis gauche-droite, ce qui fait que j'ai des espaces très grands parfois entre 2 divs dans la même colonne.
    J'ai essayé beaucoup de choses mais je n'aboutis pas. Ce que j'ai obtenu de plus intéressant comme résultat c'est d'utiliser le "column-count: 2;" sur mon span12, le problème alors c'est que la dernière div de la colonne de gauche est coupée pour se terminer dans la colonne de droite.
    Quelqu'un a-t-il une solution ? La page concernée est celle-ci: http://site.ecostrategie.com/?-Qui-sommes-nous-

    Merci !
    Mikhaël

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 785
    Points : 25 241
    Points
    25 241

    Par défaut

    Bonjour,
    je n'ai pas réussi à visualiser, en allant sur la page en lien, où se trouvait ton soucis !?!

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 021
    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 021
    Points : 19 955
    Points
    19 955

    Par défaut

    Bonjour,

    1/ il est possible aussi qu'un "simple" display:flex; avec flex-direction:column; et flex-wrap:wrap; pourrait suffire ici.
    [edit] Après test, il faut définir/fixer la hauteur du conteneur (ce qui n'est pas jouable...)

    2/ Concernant column-count:2; ça peut fonctionner en mettant sur les div enfants break-inside :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    .span6 {
      width:98%;
      float:none !important;
      box-sizing:border-box;
      margin:0 1% 30px 1%;
      break-inside:avoid; page-break-inside:avoid; -webkit-column-break-inside: avoid;
    }
    + supprimer les class "placeLeft" et "placeRight" (et supprimer la class "row" sur le parent, qui ne sert à rien)

    Néanmoins, la compatibilité laisse encore à désirer...


    3/ Pour aller plus loin :

    "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.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. div de taille fixe et div de taille variable
    Par pseudodejautilis dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 11/02/2011, 15h38
  2. Disposition de div flottante à taille variables
    Par Miles Raymond dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 12/01/2011, 22h08
  3. Réponses: 13
    Dernier message: 26/09/2008, 17h43
  4. Positionnement DIV de taille variable
    Par ferensy dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 11/02/2008, 17h49
  5. Réponses: 1
    Dernier message: 14/09/2006, 10h53

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