HTML, CSS, jQuery - высота div в одном столбце в зависимости от высоты div в другом столбце - PullRequest
Новая
       31

HTML, CSS, jQuery - высота div в одном столбце в зависимости от высоты div в другом столбце

1 голос
/ 07 ноября 2011

У меня следующая проблема.Рассмотрим пример html-кода: 

<html>
<body>
<div id="leftColumn">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
</div>
<div id="rightColumn">
  <div id="div1sidebar"></div>
  <div id="div2sidebar"></div>
  <div id="div3sidebar"></div>
  <div id="div4sidebar"></div>
</div>     
</body>
</html>

Теперь - высота div в левом столбце варьируется в зависимости от содержимого внутри них.Я бы хотел, чтобы div в правом столбце была такой же высоты, как div в левом столбце - поэтому высота div1sidebar зависит от div1, div2sidebar зависит от div2 и т. Д.

ЭтоЕсть ли способ добиться этого только с помощью CSS?Или с jQuery например?Метод «Faux columns» (http://www.alistapart.com/articles/fauxcolumns/) не вариант, потому что речь идет не о родительском происхождении, а о высоте самого div-а.

EDIT: И одно - высота div в изменении левого столбца "на лету ", без перезагрузки сайта.

Ответы [ 2 ]

0 голосов
/ 07 ноября 2011

Это одна из тех странных вещей, которые нельзя сделать в CSS.

Я использую этот плагин, и он прекрасно работает, http://www.cssnewbie.com/equalheights-jquery-plugin/

Если вы хотите, чтобы это оставалось в актуальном состоянии после изменения размера, вы можете сделать: 

$(".columns").resize(function(){
  $(".columns").equalHeights();
});

http://api.jquery.com/resize/

0 голосов
/ 07 ноября 2011

Вы можете float свои элементы влево и вправо и использовать повторяющиеся clear: both для их выравнивания, как здесь: http://jsfiddle.net/eNRhQ/2/

Это гарантирует, что соответствующие div всегда выровнены, но, как вы можете видеть по границам, их высоты на самом деле не одинаковы. (Возможно, это понадобится только для стилизации ...)

Если вы действительно хотите выровнять свои div'ы программно, вы можете сделать это следующим образом в jQuery: 

var left = $('#left-element');
var right = $('#right-element');

var maxHeight = Math.max(left.height(), right.height());

left.height(maxHeight);
right.height(maxHeight);

Но я бы позаботился о том, чтобы страница также выглядела нормально без Javascript

...