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浮动“行”

回答

相关问题