Скрипт, который делает все плавающие divs одинаковой высоты

#javascript #jquery #css

Вопрос:

Привет, у меня осталось 20 плавающих divs разной высоты. Я использую этот скрипт для изменения их размера. Он работал идеально, когда мой веб-сайт был разработан с использованием пикселей.

Когда я изменил свой веб-сайт на % design (процентный дизайн), скрипт перестал работать так надежно, иногда он не изменяет размер.

можете ли вы взглянуть, нужны ли какие-либо настройки для жидких макетов?

может быть, это способ, которым я вызываю скрипт?

Ты очень

Вот оно:

 var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

function setConformingHeight(el, newHeight) {
 // set the height to something new, but remember the original height in case things change
 el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
 el.height(newHeight);
}

function getOriginalHeight(el) {
 // if the height has changed, send the originalHeight
 return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}

function columnConform() {

 // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
 $('div.column').each(function(index) {

  if(currentRowStart != $(this).position().top) {

   // we just came to a new row.  Set all the heights on the completed row
   for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv  ) setConformingHeight(rowDivs[currentDiv], currentTallest);

   // set the variables for the new row
   rowDivs.length = 0; // empty the array
   currentRowStart = $(this).position().top;
   currentTallest = getOriginalHeight($(this));
   rowDivs.push($(this));

  } else {

   // another div on the current row.  Add it to the list and check if it's taller
   rowDivs.push($(this));
   currentTallest = (currentTallest < getOriginalHeight($(this))) ? (getOriginalHeight($(this))) : (currentTallest);

  }
  // do the last row
  for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv  ) setConformingHeight(rowDivs[currentDiv], currentTallest);

 });

}

$(window).resize(function() {
 columnConform();
});

$(document).ready(function() {
 columnConform();
});

1. для вашего макета страницы вам следует учитывать css … в основном

2. Что % desing (в тексте вопроса)?

3. Жидкий дизайн, где все divs указаны в процентах

4. О, теперь я понял. Дизайн на основе процентов.

5. публикация html-макета поможет проанализировать проблему…

Ответ №1:

Что ж, если вы измените его на fluid layout (% design), то вам придется добавить прослушиватель изменения размера окна, в основном, когда выполняется событие изменения размера или во время его выполнения вам нужно вызвать скрипт, чтобы он мог пересчитать с новыми размерами, вам не нужно было делать это с пикселями, потому что это был фиксированный размер, и после назначения он не изменится, независимо от того, сколько раз вы изменяете размер фактического экрана.

1. Разве это не добавлено в приведенный выше код? как я могу это сделать, пожалуйста, приведите мне пример?

2. на самом деле вы правы, о изменении размера позаботится ваш код в этом блоке: $ (window).resize(function() { columnConform(); }); Пожалуйста, опубликуйте часть html, чтобы я мог помочь вам отладить его.

3. вы можете поместить код в jsfiddle. также подключайтесь, если хотите, и публикуйте URL, все, что вам подходит. Приветствия.

Ответ №2:

Если вы используете стили, подобные этому:

 <style>
    .parent{
        background:#F00;height:300px
    }
    .parent div{
        float:left;height:100%;width:33.33%;
    }
</style>
<div class="parent">
    <div style="background:#FED"></div>
    <div style="background:#EDF"></div>
    <div style="background:#DFE"></div>
</div>

Вам просто нужно установить высоту родительского элемента div и ширину дочерних элементов div