Est égal à hauteurs de vignettes

J'ai 3 thumbnail span3 éléments par Twitter Bootstrap ligne mais la la <p> texte est la variable qui casse la mise en page. Comment pourrais-je définir chaque thumbnail à la hauteur de la plus grande vignette de sorte qu'ils entrent correctement?

<div class="box_line" style="float: left; border: 1px solid red;">
  <div class="thumbnail span3">
    <img src="http://placehold.it/260x180" alt=""/>
    <div class="caption">
      <h5>Thumbnail label</h5>
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
  </div>
</div>

Je n'ai pas trouvé un travail plugin jQuery pour ce faire et la solution dans cette rubrique ne fonctionne pas pour moi non plus.

Je suis désolé mais je ne comprends pas votre anglais: Que voulez-vous dire "à chaque fois que le texte dans la <p> élément a d'autre hauteur", et ce qui est "le plus haut miniature" ?
peut-être il pourrait être utile de savoir pourquoi voulez-vous que toutes les cases de même hauteur d'essayer différentes approches (css pur)
parfois, le texte dans le P balise a 10 caractères, parfois 300 chars => le texte dans le p sera dans une rangée, ou qui pourraient l'être également sur 5 lignes. "La plus grande vignette" est la vignette avec le plus haut (à cause de la variable texte dans le p)
parce que j'essaie d'obtenir effet. (cet exemple ne fonctionne pas de moi)
peut-être que vous essayez d'obtenir des colonnes de hauteur avant la fin du chargement de l'image. pouvez-vous fournir une démonstration de ce que vous avez fait?

OriginalL'auteur user984621 | 2012-02-14

  1. 21

    essayer ce violon : http://jsfiddle.net/PbfpU/2/ (j'ai utilisé le script que vous avez établi le lien dans les commentaires)

    de toute façon, assurez-vous d'appeler cette fonction uniquement après que toutes les vignettes ont été chargés, sinon vous pourriez obtenir des valeurs erronées.

    function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumbnail")); 
});
    mais le problème, c'est que cet exemple ne fonctionne pas dans le Chrome est ici de définir la hauteur de la ligne par la première zone (en FF ça marche.)
    viens de vérifier sur google chrome, consultez le violon à jour
    merci, fonctionne 😉
    salut Fabrice, pourriez-vous une fois de plus, merci de m'envoyer un correctif pour Chrome?
    Vous avez résolu mon problème Fabrizio!

    OriginalL'auteur fcalderan

  2. 17

    Je sais je suis en retard à la fête, mais voici une représentation de la variation sur Fabrizio réponse, enveloppé comme un plugin jQuery:

    (function($) {
    $.fn.uniformHeight = function() {
        var maxHeight   = 0,
            max         = Math.max;

        return this.each(function() {
            maxHeight = max(maxHeight, $(this).height());
        }).height(maxHeight);
    }
})(jQuery);

    ...et pour l'utiliser:

    $(".thumbnails").find(".thumbnail").uniformHeight();

    Aussi, si vos miniatures contiennent des images, assurez-vous d'appeler cette après la fenêtre de chargement de l'événement a été déclenché.

    +1 pour le mentionner à propos d'attente pour toutes les images chargées

    OriginalL'auteur Tim Lowrimore

  3. 10

    CSS solution serait d'utiliser clear: left; pour chaque vignette qui devrait être le premier dans la ligne. Cela fonctionne si vous connaissez le nombre de vignettes dans une ligne à l'avance.

    Je utiliser à la suite de la classe css:

    ul.thumbnails.per6 > li:nth-child(6n+1) {
  clear: left;
}

    Et HTML ressemble à ceci:

    <ul class="thumbnails per6">
  <li class="span2">
    <div class="thumbnail">...</div>
  </li>
</ul>

    Veuillez voir cette pour la prise en charge du navigateur.

    OriginalL'auteur denis-bu

  4. 7

    J'ai bien aimé la réponse de Tim, et voici ma version dans un one-liner:

    $(".thumbnail").height(Math.max.apply(null, $(".thumbnail").map(function() { return $(this).height(); })));

    Avec un clin d'œil à Roatin Marth pour obtenir le maximum de la valeur d'un tableau.

    Cela fonctionne parfaitement, littéralement branché sur mon installation démarrage qui a une quantité inconnue de hauteur variable thumbmails. Merci!

    OriginalL'auteur Benjamin Curtis

  5. 2

    Pour des sites responsive, vous souhaitez mettre à jour la hauteur de la fenêtre de redimensionnement. J'ai étendu Tim Lowrimore de uniformHeight plugin avec Gaby aka G. Petrioli l'astuce pour arriver à la hauteur d'un des éléments de contenu à l'aide de wrapInner https://stackoverflow.com/a/6853368/1138558.

    (function ($) {
    $.fn.uniformHeight = function () {
        var maxHeight = 0,
            wrapper,
            wrapperHeight;

        return this.each(function () {

            //Applying a wrapper to the contents of the current element to get reliable height
            wrapper = $(this).wrapInner('<div class="wrapper" />').children('.wrapper');
            wrapperHeight = wrapper.outerHeight();

            maxHeight = Math.max(maxHeight, wrapperHeight);

            //Remove the wrapper
            wrapper.children().unwrap();

        }).height(maxHeight);
    }
})(jQuery);

    J'ai ensuite appliqué à l'miniatures à l'aide:

    $('.thumbnails').find('.thumbnail').uniformHeight();

$(window).resize(function () {
    $('.thumbnails').find('.thumbnail').uniformHeight();
});
    Incroyable, merci beaucoup !
    Wrapper élément n'est pas supprimé...

    OriginalL'auteur Simon Woodhead

  6. 0

    ce code dans le css

    /*in css*/
  .thumbnail img{
   height:100px;
                }

    /ou tout simplement ajouter, il inline/

      <img="imglinkwhateveryouwant" style="height:100px;">

    que c'est!!!

    OriginalL'auteur Aniket Patil

  7. 0

    Juste ajouter ci-dessous les css de résoudre votre problème.

    .container{
    display: flex;
    flex-wrap: wrap;
  }

    Vous pouvez voir le résultat ici.
    http://www.bootply.com/RqapUKLqMF

    Il n'est pas du travail. Vous avez juste à utiliser le même contenu pour tous

    OriginalL'auteur Capsen

  8. -2

    Il suffit de mettre un maximum de hauteur. 

    .caption p {
   height: 120px;
}

    http://jsfiddle.net/F5eCq/

    C'est non réactif, qui va à l'encontre de l'objectif principal de l'utilisation de Twitter Bootstrap est thumbnails parce que si les images (entre autres éléments) arrive d'avoir des hauteurs différentes, le même problème va se produire. C'est un point de frustration pour moi, mais ce n'est pas une solution flexible.

    OriginalL'auteur Andrew Luzkovky