DIV равной высоты в плавающем «ряду» - PullRequest
Новая
       19

DIV равной высоты в плавающем «ряду»

0 голосов
/ 01 октября 2009

Хорошо, у меня есть этот код: 

<div class='layout' style='width: 500px;'>
  <div class='layout_frame' style='width: 300px;'></div>
  <div class='layout_frame' style='width: 200px;'></div>
  <div class='layout_frame' style='width: 100px;'></div>
  <div class='layout_frame' style='width: 300px;'></div>
  <div class='layout_frame' style='width: 100px;'></div>
</div>

Хорошо, каждый вышеупомянутый DIV смещен влево, так что я получаю две «строки» DIV, указанная выше строка содержит первые два, вторая - три последних DIV, верно?

Хорошо, так что каждый "layout_frame" может содержать любой контент, поэтому он будет иметь разную высоту, но я хочу, чтобы высота была равна WITHIN THE ROW. Таким образом, первые два, возможно, оба должны иметь высоту 800px, а третий последний должен быть, например, 200px - на основе самого высокого DIV в «ряду».

Итак, я использую jQuery position (), чтобы узнать, какие из них находятся в одной строке, с этим кодом: 

var rows = new Array();
$("div.layout_frame").each(function(){
    var pos = $(this).offset().top;
    var height = $(this).height();
    if (height > rows[pos]){
        rows.pos = height;
    }
});

Но это так далеко, как я пришел. Я устанавливаю «pos», скажем «124», который должен быть равен для первых двух, а не для последних трех. Но каждая «группа» DIVS должна иметь одинаковую высоту, основываясь на самом высоком.

Я действительно надеюсь, что объяснил это правильно. Любая помощь приветствуется

Ответы [ 3 ]

4 голосов
/ 25 января 2011

Вы можете сделать это следующим образом (замените ваш jQuery следующим): 

$(document).ready(function() {

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

    $('div.layout_frame').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++) rowDivs[currentDiv].height(currentTallest);

            // set the variables for the new row
            rowDivs.length = 0; // empty the array
            currentRowStart = $(this).position().top;
            currentTallest = $(this).height();
            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 < $(this).height()) ? ($(this).height()) : (currentTallest);

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

    });

});
2 голосов
/ 01 октября 2009

вам лучше выложить это так: 

<div class='layout' style='width: 500px;'>
  <div class='layout_frame' style='width: 300px;'></div>
  <div class='layout_frame' style='width: 200px;'></div>
</div>
<div class='layout' style='width: 500px;'>
  <div class='layout_frame' style='width: 100px;'></div>
  <div class='layout_frame' style='width: 300px;'></div>
  <div class='layout_frame' style='width: 100px;'></div>
</div>

Затем посмотрите, какой дочерний элемент div каждого макета имеет наибольшую высоту, и установите для всех них эту высоту.

0 голосов
/ 01 октября 2009

На данный момент у меня есть этот код, соответствующий вашим потребностям: я буду обновлять код в соответствии с вашими пожеланиями. 

<html>
<head>
<title>frame layout</title>
<style  type="text/css"> 
div
{
    border: 1px solid black;
    height: 25px;
    float: left;
}
.layout
{
    border: 2px solid red;
}
</style>
</head>
<body>

<div class='layout' style='width: 500px;'>
  <div class='layout_frame' style='width: 300px;'>div1</div>
  <div class='layout_frame' style='width: 200px;'>div2</div>
  <div class='layout_frame' style='width: 100px;'>div3</div>
  <div class='layout_frame' style='width: 300px;'>div4</div>
  <div class='layout_frame' style='width: 100px;'>div5</div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...