DIV浮動「行」

好內高度相等，所以我有這樣的代碼：DIV浮動「行」

<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」可以包含任何內容，所以他們會不同高度的，但我想的高度等於內的行。所以前兩者可能都應該是800px高，第三個應該是，例如，200px--基於「行」中最高的DIV。

所以我使用jQuery位置（）來找出哪些是在同一行中，使用此代碼：

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的「團隊」應該有相同的高度，基於最高。

我真的很希望我解釋正確。任何幫助表示讚賞

來源

2009-10-01 Sandman

嗨，當我用你的代碼，我得到3行：先用DIV1，第二與DIV2和div3，第三個與div4和div5（與x作爲訂單號的divx）... 你能請張貼你的CSS？ – enguerran 2009-10-01 13:40:21

你爲什麼如此堅決將所有內部div都放在一個外部div中？你有什麼特別的理由需要這樣做嗎？通過將每個'行'拆分爲它自己的外部div，肯定事情會更容易控制？ – belugabob 2009-10-01 14:40:25

你會更好鋪設出像這樣：

<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有最大的高度，他們都設置爲高。

來源

2009-10-01 13:31:24 GSto

不，我不會這樣做。我想解決它從我的OP中的解釋，但無論如何感謝 – Sandman 2009-10-01 13:57:15

但他的方式確實更有意義，並會更容易... – qui 2009-10-01 14:03:38

我認爲你需要回答OP，因爲你不知道確切的問題，他正在解決。他的問題也是我的問題，你的解決方案也不適合我。 – 2012-03-08 23:50:57

目前，我有這樣的代碼對應您的需求：我會根據您的意願更新代碼。

<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>

來源

2009-10-01 13:42:55 enguerran

這打破了父母的DIV，因此我不能使用它。這些都在相同的DIV – Sandman 2009-10-01 13:56:27

好吧，我改變了它... 可能你可以添加另一個類（class ='layout_frame div1_height'和class ='layout_frame div2_height'）以相同的方式改變兩組div （使用JavaScript來改變CSS值）？ – enguerran 2009-10-01 14:31:55

嗯，寬度是動態的，所以也許其中一個DIVS會增長和縮小，所以DIV3突然間適合第1行，這都是動態的，所以我需要隨着它的變化更新高度。 – Sandman 2009-10-01 14:36:18

你可以做這樣的（替換爲你的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); 

    }); 

});

來源

2011-01-25 15:24:47 HardlyNoticeable

是的，就是這樣！謝謝！ – 2012-03-09 00:03:01

如果您還希望在調整窗口大小（並強制元素重新流動）時調整列的大小，可以查看我的博客文章以擴展此解決方案：http://stephenakins.blogspot.com/2011 /01/uniform-div-heights-for-liquid-css-p.html – HardlyNoticeable 2012-03-16 19:10:15

來自：http://css-tricks.com/equal-height-blocks-in-rows/ – 2012-08-01 14:13:35

DIV浮動「行」

回答

相關問題