Mam 4 elementy inline bloku ze stałym szerokością, ale zmienną treścią i chcę, aby wszystkie te elementy mają taką samą wysokość - największego elementu. Proszę zobaczyć Ten jsfiddle.

Jak to osiągnąć? Jeśli nie można tego zrobić za pomocą tylko CSS, jaki jest właściwy sposób, aby to zrobić za pomocą JavaScript?

4
Oliver 6 październik 2011, 21:09

6 odpowiedzi

Najlepsza odpowiedź

Prawdopodobnie lepiej uczynić go modułowym i wielokrotnego użytku, w Moootools, możesz prototypować kolekcję HTML:

Elements.implement({
    setEqualHeight: function(height) {
        height = height || Math.max.apply(Math, this.map(function(el) { 
            return el.getSize().y 
        }));
        this.setStyle("height", height);
    }
});

// use tallest as height for all
document.getElements("div.equals").setEqualHeight(); 
// or hardwire all to 500...
document.getElements("div.equals").setEqualHeight(500); 

Skrzypce. http://jsfiddle.net/txtbq/2/

Oraz ze swoim ul / li: http://jsfiddle.net/kkzxj/8/

Działa na czymkolwiek, nawet nie muszą być blisko siebie

5
Dimitar Christoff 6 październik 2011, 20:02

Możesz zastosować styl height i overflow do elementów <li>

height: 200px;
overflow: auto;

http://jsfiddle.net/kkzxj/1/


Może nie być dokładnie tym, czego szukasz za pomocą największego elementu jako wysokości.

Innym sposobem na to byłoby użyć elementu <table>, a każda komórka dałaoby Ci pożądany efekt.

http://jsfiddle.net/kkzxj/3/

3
hunter 6 październik 2011, 17:14

Ta-Dahhhh!

Chociaż wymaga pętli obiekt.each (). Rodzaj hacky, ale działa dla twoich celów.

Istotne javascript:

// Calculate the target height of all of the li elements
var targetHeight = document.getElement('ul').getStyle('height');

// Then set their heights to the calculated max
document.getElements('li').each(function(element, key) {
    element.setStyle('height', targetHeight);
});
2
Julian H. Lam 6 październik 2011, 17:24

Oto elegancki sposób jQuery :)

http://jsfiddle.net/rifat/yg2xt/

2
Rifat 6 październik 2011, 17:35

Podaj swój identyfikator myUl i spróbuj uruchomić następujący skrypt. Działa na motoolsach. Najpierw przynieś maksymalną wysokość elementów Li, a następnie ustawić każdą wysokość za pomocą wartości.

 var ul = document.getElementById("myUL"); // get the UL 
 var liNodes = ul.getElementsByTagName("li"); // Iterate through the li's
 var maxHeight = -1; 
 for( var i = 0; i < liNodes.length; i++ ) {
    // get the child nodes of the li  
   var li = liNodes.item(i);  
   if(maxHeight < li.offsetHeight)
         maxHeight = li.offsetHeight; 
 }

 for( var i = 0; i < liNodes.length; i++ ) { // get the child nodes of the li 
   liNodes.item(i).style.height = maxHeight+'px'; //set heights 
 }
1
arviman 6 październik 2011, 17:28

Bardzo prosta wtyczka jQuery, która automatycznie zmieniaj elementy, gdy zmieniono rozmiar okna.

Zmień .my-inline-block-class do selektora jQuery, które wybierze elementy blokowania wbudowania.

(function($, window) {
    var $ls, $t;
    function autoheight() {
        var max = 0;
        $ls.each(function() {
            $t = $(this);
            $t.css('height','');
            max = Math.max(max, $t.height());
        });
        $ls.height(max);
    }
    $(function() {
        $ls = $('.my-inline-block-class'); // the inline-block selector
        autoheight(); // first time
        $ls.on('load', autoheight); // when images in content finish loading
        $(window).resize(autoheight); // when the window size changes
    });
})(jQuery, window);
0
d'Artagnan Evergreen Barbosa 6 grudzień 2015, 18:37