Плавная коробка с разной высотой - PullRequest
Новая
       16

Плавная коробка с разной высотой

1 голос
/ 07 декабря 2009

Я работаю над сайтом, использующим MVC 1.0 (но скоро обновлюсь до 2.0).
На сайте есть верхний заголовок и несколько ящиков (элементов UL), содержащих информацию под ним.
Я хотел бы использовать браузеры по всей ширине, чтобы использовать преимущества широкоэкранных мониторов, поэтому количество блоков в каждом ряду строк зависит от ширины окна браузера.
Проблема в том, что ящики не имеют фиксированной высоты, высота зависит от содержимого каждого ящика.
Высота каждой строки должна быть установлена ​​самой большой рамкой в ​​этой строке.

Каков наилучший способ сделать это?
Я надеюсь, что мой вопрос имеет смысл, это немного сложно объяснить =)

Ответы [ 2 ]

2 голосов
/ 07 декабря 2009

Я не уверен, что это возможно только с использованием CSS. Однако вы можете сделать это с помощью Javascript.

Оберните ваши элементы с помощью div и установите высоту этого div с помощью javascript на высоту большего поля. 

<div class="box-wrapper">
  <div id="box1" class="a-box">
    <!-- content -->
  </div>
</div>
<div class="box-wrapper">
  <div id="box2" class="a-box">
    <!-- content -->
  </div>
</div>
<div class="box-wrapper">
  <div id="box3" class="a-box">
    <!-- content -->
  </div>
</div>

Затем выполните следующие действия для jQuery готового документа: 

var maxheight=$(".a-box").eq(0).height();
$(".a-box").each(function(){
  if(maxheight<$(this).height())
    maxheight=$(this).height();
});

$(".box-wrapper").height = maxheight;

Примечание: этот код вообще не оптимизирован, вы должны использовать переменные вместо повторяющихся selmectors и стараться не использовать каждый из них, а вместо этого использовать классический цикл for.

1 голос
/ 07 декабря 2009

этот ресурс о колоннах одинаковой высоты может вам помочь: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

С уважением, Mtness.

...