Question

我有一个浮动的动态元素列表，应该在一行中的另外两个元素之后显示。通过动态，我的意思是要显示的元素是基于动态标准决定的，并且可以具有不同的高度。有没有办法将兄弟元素的高度调整为等于当前元素的高度。这是一个用例示例。第一和第二分区应该具有相同的高度，div和div应该具有相同的高度。任何人都可以建议我如何实现这一目标。 我无法将两个元素连成一行，因为我不知道应该预先渲染哪个元素。该页面包含所有元素的详尽列表，并使用angualar ng-if指令来呈现所需的元素。截至目前，我正在将所需的最大高度作为所有div的最小高度。但这导致了许多不必要的额外空间。还有其他更好的解决方案吗？

 <div class="col-xlg-12">
   <div class="one col-xlg-6" ng-if="renderHugeContentElement">I have huge content</div>
   <div class="two col-xlg-6" ng-if="renderSingleLineElement">I have single line content </div>
   <div class="three col-xlg-6" ng-if="renderTwoLinesElement"> I have two lines content </div>
   <div class="four col-xlg-6" ng-fi="renderFourLinesElement">I have four lines content </div>
</div>

Answer 1

我猜你正在使用循环来渲染列。

您可以通过呈现每行包含2列的行来配置循环。

生成的HTML看起来像：

<div class="col-xlg-12">
   <div class="row">
       <div class="one col-xlg-6">I have huge content</div>
       <div class="two col-xlg-6">I have single line content </div>
   </div>
   <div class="row">
       <div class="three col-xlg-6"> I have two lines content </div>
       <div class="four col-xlg-6">I have four lines content </div>
   </div>
   ...
   <!-- more dynamic elements come here -->
</div>

这样可确保每两列始终并排放置。

<强>更新

正如你所说，你无法将元素包装在<div class="row">中，你将不得不依赖于javascript。您可以创建一个在将新元素添加到DOM时触发的函数，并且此函数将2个相邻元素的高度设置为最高高度。

Answer 2

让我假设你想要的一行只有2列，而且根据Hemant，你试图为很多动态元素使用循环。

这一次，我非常确定你的div具有相同的宽度，根据你的问题，它们有不同的高度。我建议你做Pinterest的事。

<div class="col-xlg-12">
   <div class="longcolumn1 col-xlg-6">
     <div class="one col-xlg-12">I have huge content</div>
     <div class="three col-xlg-12"> I have two lines content </div>
   </div>
   <div class="longcolumn2 col-xlg-6">
     <div class="two col-xlg-12">I have single line content </div>
     <div class="four col-xlg-12">I have four lines content </div>
   </div>
</div>

现在，您所要做的就是循环并交替渲染为longcolumn1和longcolumn2。

好吧，我想我明白了。继承了我的最新答案。我这样做只是为了你。享受。

    <!DOCTYPE html>
<html>
<head>
    <title>try</title>
<style>
*
{
    color:#111;
}
#row1
{
    width:100%;
}
#one
{
    background:red;
    height:300px;
    width:50%;
    float:left;
}
#two
{
    background:green;
    height:40px;
    width:50%;
    float:left;
}
#three
{
    background:blue;
    height:80px;
    width:50%;
    float:left;
}
#four
{
    background:yellow;
    height:160px;
    width:50%;
    float:left;
}
#five
{
    background:orange;
    height:580px;
    width:50%;
    float:left;
}
#six
{
    background:brown;
    height:360px;
    width:50%;
    float:left;
}
#seven
{
    background:gray;
    height:160px;
    width:50%;
    float:left;
}
</style>
</head>
<body>

<div id="row1" class="col-xlg-12">
   <div id="one" class="one col-xlg-6" ng-if="renderHugeContentElement">I have huge content.</div>
   <div id="two" class="two col-xlg-6" ng-if="renderSingleLineElement">I have single line content </div>
   <div id="three" class="three col-xlg-6" ng-if="renderTwoLinesElement"> I have two lines content </div>
   <div id="four" class="four col-xlg-6" ng-fi="renderFourLinesElement">I have four lines content </div>
   <div id="five" class="three col-xlg-6" ng-if="renderTwoLinesElement"> I have two lines content </div>
   <div id="six" class="four col-xlg-6" ng-fi="renderFourLinesElement">I have four lines content </div>
   <div id="seven" class="three col-xlg-6" ng-if="renderTwoLinesElement"> I have two lines content </div>
</div>

<script>
// SET THIS to on or off to see changes
var sample = "on";

if(sample=="on")
{
    function call(e)
    {
        return document.getElementById(e)
    }

    var start=call("one");

    var totalofdivs = call("row1").childElementCount;
    for(var n=0;n<(totalofdivs/2);n++)
    {
        if(start.nextElementSibling)
        {
            var nextelement = start.nextElementSibling;
            var lastelement = start;
            nextelement.style.height=lastelement.offsetHeight+"px";

            start = nextelement.nextElementSibling;
        }
    }
}
</script>
</body>
</html>

只需尝试复制/粘贴到示例notepad.html

那么如果右侧的另一个div比左侧的div更大呢？这是我的代码，用于检查两者中哪一个更大，并将设置其高度。

     <!DOCTYPE html>
<html>
<head>
    <title>try</title>
<style>
*
{
    color:#111;
}
#row1
{
    width:100%;
}
#one
{
    background:red;
    height:300px;
    width:50%;
    float:left;
}
#two
{
    background:green;
    height:40px;
    width:50%;
    float:left;
}
#three
{
    background:blue;
    height:80px;
    width:50%;
    float:left;
}
#four
{
    background:yellow;
    height:160px;
    width:50%;
    float:left;
}
#five
{
    background:orange;
    height:580px;
    width:50%;
    float:left;
}
#six
{
    background:brown;
    height:360px;
    width:50%;
    float:left;
}
#seven
{
    background:gray;
    height:160px;
    width:50%;
    float:left;
}
</style>
</head>
<body>

<div id="row1" class="col-xlg-12">
   <div id="one" class="one col-xlg-6" ng-if="renderHugeContentElement">I have huge content.</div>
   <div id="two" class="two col-xlg-6" ng-if="renderSingleLineElement">I have single line content </div>
   <div id="three" class="three col-xlg-6" ng-if="renderTwoLinesElement"> I have two lines content </div>
   <div id="four" class="four col-xlg-6" ng-fi="renderFourLinesElement">I have four lines content </div>
   <div id="five" class="three col-xlg-6" ng-if="renderTwoLinesElement"> I have two lines content </div>
   <div id="six" class="four col-xlg-6" ng-fi="renderFourLinesElement">I have four lines content </div>
   <div id="seven" class="three col-xlg-6" ng-if="renderTwoLinesElement"> I have two lines content </div>
</div>

<script>
// SET THIS to on or off to see changes
var sample = "on";

if(sample=="on")
{
    function call(e)
    {
        return document.getElementById(e)
    }

    var start=call("one");

    var totalofdivs = call("row1").childElementCount;
    for(var n=0;n<(totalofdivs/2);n++)
    {
        if(start.nextElementSibling)
        {
            var nextelement = start.nextElementSibling;
            var lastelement = start;

            if(nextelement.offsetHeight<lastelement.offsetHeight)
            {
                nextelement.style.height=lastelement.offsetHeight+"px";
            }
            else
            {
                lastelement.style.height=nextelement.offsetHeight+"px";
            }

            start = nextelement.nextElementSibling;
        }
    }
}
</script>
</body>
</html>

浮动元素的动态高度

2 个答案: