Как сделать HTML блоки одинаковой высоты - используем JQuery

Итак, если вы когда-нибудь пробовали реализовать блочные элементы на HTML одинаковой высоты, то не по наслышке знаете, что сделать такое средствами одного лишь CSS более чем проблематично несмотря на то, что по Сети раскидано несколько способов решения такой проблемы. Сегодня я приведу пример небольшого скрипта на JavaScript с использованием возможностей JQuery, который успешно решает описанный вопрос.

JavaScript:

jQuery(document).ready(function($) {

    var maximalnayaVisota = 0; // - максимально допустимая высота каждого блока.
    $(".primeri").each(function() {
        if ($(this).height() > maximalnayaVisota) {
            maximalnayaVisota = $(this).height();
        }
    });
    $(".primeri").height(maximalnayaVisota);

});

CSS:

#container { 
    width: 960px; 
    height: 300px; 
    margin: 130px 
    auto; 
}
.primeri {
    width: 300px;
    display: inline-block;
    background: #ddd;
    border: solid 1px #fff;
    float: left;
}

HTML:

<div class="primeri"><p>Lorem ipsum dolor sit amet consectetuer magna risus scelerisque Quisque tincidunt. Aliquam Phasellus magnis feugiat amet aliquet velit vel pellentesque quis Curabitur. Phasellus Duis lacinia habitant nisl libero Nullam lacinia quis nisl porttitor. Metus Aenean Pellentesque felis Pellentesque Maecenas enim Nunc eleifend non dui. Tincidunt porttitor congue tristique convallis venenatis et malesuada ut parturient arcu. Senectus libero tempus lacus wisi faucibus amet iaculis sit Sed mi. Urna condimentum.</p></div>
<div class="primeri"><p>Orci urna morbi lacus Donec eros suscipit Pellentesque sociis gravida Donec. Orci Ut eget sed et et Duis malesuada massa mauris Nunc. Leo leo Vestibulum congue faucibus tempus sem rhoncus Quisque semper Lorem. Parturient Suspendisse amet nec est mi dictum quis habitant Integer rhoncus. Augue vitae Sed Nam ut Aenean facilisi est sed et nibh. Turpis nulla.</p></div>
<div class="primeri"><p>Vestibulum ipsum sed interdum et eros Vivamus id laoreet ipsum porta. Quam turpis enim quis et sapien metus adipiscing congue libero rhoncus. Sed id Pellentesque et at Suspendisse pellentesque a eu tellus enim. Pellentesque augue wisi sit et auctor augue In urna est Pellentesque. Nam tincidunt consectetuer velit ut nibh.</p></div>

А в окне браузер это будет выглядеть вот так:

Блоки одинаковой высоты в HTML / CSS на JavaScript

Кроссбраузерно, проверенный способ.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.