Как я могу гарантировать, что два divs всегда имеют одинаковую высоту?

ProgramBox

Как я могу гарантировать, что два divs всегда имеют одинаковую высоту?

Post author:admin
Запись опубликована:12 марта, 2023
Post category:Вопросы по программированию

#jquery #css #jquery-mobile

#jquery #css #jquery-мобильный

Вопрос:

Я использую jquery-mobile framework. У меня есть два div s рядом (в виде столбцов), я пытаюсь сохранить их высоту одинаковой независимо от того, сколько данных они содержат.

Это html:

   <ul class="datablock" id="Manufacturing_and_Qualification_Information" style="display: none;">    
 <div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
     <div data-theme="d" id="paramBlk" class="ui-block-m"><li>Blah Blah Blah Blah Blah</li></div> 
     <div data-theme="d" id="valueBlk" class="ui-block-n"><li>Blah</li></div>
</div>  
<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
    <div class="ui-block-m" id="leftBtmRnd"><li>Blah Blah Blah Blah Blah</li></div> 
    <div class="ui-block-n" id="rightBtmRnd"><li>Blah</li></div>
</div>
</ul>

Это код jQuery, для которого я пробовал so, но он работает не так, как ожидалось:

 var $blockM = $(".datablock").find('.ui-block-m');  
    var $blockN = $(".datablock").find('.ui-block-n');                  
     if($blockM.height() < $blockN.height()){       
        $blockM.css('height',$blockN.height());        
    }else if($blockM.height() > $blockN.height()){   

        $blockN.css('height',$blockM.height());       
    }

Как я могу этого добиться?

1. Использовать таблицу для отображения данных в таблице?

2. Почему у вас есть div теги, содержащиеся непосредственно внутри a ul ?

3. Как я уже сказал, это мобильный application…so мне нужно показать данные в формате ul li..

4. @James Khoury: использование table вернулось к табу без всякой логической причины после того, как им злоупотребляли в течение многих лет. По-видимому, «без таблиц» теперь считается особенностью (понятия не имею, почему).

Ответ №1:

Рабочая ссылка: http://jsfiddle.net/bMMpz/1 /

Вот код:

 var biggestHeight = 0;
var $blockM;
var $blockN;

$(function() {
    $blockM = $(".datablock").find('.ui-block-m');
    $blockN = $(".datablock").find('.ui-block-n');

    getBiggestHeight();

    $blockN.height(biggestHeight);
    $blockM.height(biggestHeight);
});



function getBiggestHeight() {
    $blockM.each(function(i, e) {
        if ($(e).height() > biggestHeight) biggestHeight = $(e).height()
    });
    $blockN.each(function(i, e) {
        if ($(e).height() > biggestHeight) biggestHeight = $(e).height()
    });
}

Я ищу самый большой div, а затем выбираю оба селектора и устанавливаю высоту.

1. На самом деле нет необходимости иметь методы и переменные вне DOM-готового метода, вы можете просто использовать его как частные переменные внутри методов, а getBiggestHeight может быть более общим методом, если он хочет добавить больше элементов: jsfiddle.net/bMMpz/2

2. спасибо buddy..it работает нормально… но я сталкиваюсь с еще 1 проблемой .. когда я изменяю размер содержимого окна внутри div, отображаемого снаружи … как я могу исправить эту проблему..

3. вы можете попробовать clear:both и / или display:block в ваших divs, в вашем css. Никаких проблем, брат

4. на самом деле это происходит для более длинного word ..like blahblahblahblah … затем он выходит за пределы div, в противном случае, если у меня есть пробел между словами, которые он правильно переносит

5. отображение: блок или встроенный блок?

Ответ №2:

Для этого мы используем плагин jquery (я полагаю), называемый ‘equalheights’. Кажется, их несколько, но все они, похоже, выполняют одну и ту же работу. (Я не выбрал этот в нашем проекте, поэтому я не знаю точно, какой именно мы используем, но они кажутся несколько равными)

Взгляните на этот плагин или этот плагин, я думаю, они делают то, что вы хотите.

1. нехорошо использовать плагин для такой мелочи … я могу сказать, что это всего лишь вопрос 4-5-строчного кода jquery..

2. Можете ли вы на самом деле привести причины для этого? Плагин очень маленький, это просто вопрос того, откуда вы берете свой код: из функции, которую вы объявляете, или из той, которую вы загружаете. Думать, что «плагин» (на самом деле это просто функция) займет больше времени, — это микрооптимизация. И, видя, что требуется ТАК много попыток, чтобы сделать это правильно, зачем заново изобретать колесо? Вы даже можете просто скопировать код, если это заставит вас чувствовать себя лучше, но для этого нет реальной причины.

Ответ №3:

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

    group.height(tallest);

    }
    $(document).ready(function() {
    equalHeight($(".ui-grid-m"));
    });

Или используйте css3

 .datablock
{ display:table;
}
.ui-grid-m
{  display:table-cell;
}

Ответ №4:

  if($blockM.height() < $blockN.height())
{               
    $blockM.height($blockN.height());             
}else if($blockM.height() > $blockN.height())
{  
   $blockN.height($blockM.height()); 
}

попробуйте это

Ответ №5:

Две сетки столбцов

 <div class="ui-grid-a">
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>

Просто посмотрите в jQuery Mobile

Ответ №6:

 $(document).ready(function({
    var x = $('#primary').height();
    $('#sidebar').css('height', x);
});

Надеюсь, это поможет.