如何获得引导行中的最高div

Question

我想将边框应用于Bootstrap行内的最高div。下面是我的代码（作为一个例子）：

<section>
    <div class="row">
        <div class="col-md-6">
            <strong><span style="color:#f77f00;">TIP 1:</span> blahblahblah</strong>
            <p>dnijengeinjkdngkjdfnsdmnvjkgnkjnvjkerngeiuj <br/>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="col-md-6">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/4ZT2AXgGzAU?start=77" frameborder="0" allowfullscreen class="embed-reponsive-item"></iframe>
            </div>
        </div>
    </div>
</section>

在某些情况下，YouTube视频DIV（class="col-md-6"）最高，而在其他情况下，文本div（class="col-md-6"）最高。（例如，当您在平板电脑上查看时）

确定最高div的最佳解决方案是什么，找出它在哪一边（左/右），并将边框应用到左或右（取决于它在哪一边）？

正如你所看到的，中线并不是一直到底部。我希望它一路走到底，我已经找到了一个解决方案：

section {
    padding: 30px;
    border: 1px solid gray;
    margin-bottom: 45px;
}

section .row {
    border: 1px solid gray;
}

section .row > div:last-of-type {
    border-left: 1px solid gray;
}

section .row > div:only-child {
    border-left: 0;
}

@media (max-width: 991px) {
    section .row > div:last-of-type {
        border-left: 0;
    }
}

但这只适用于右侧div高于左侧div的情况（如示例中所示）

如果我的问题不清楚或不完整，请告诉我。

编辑：为什么我的帖子被否决了？我不明白为什么。

Answer 1

你可以试试这个脚本。它均衡您的列，所以您可以给任何列的边框，没关系。你也可以把它放在一个函数中，并在每次窗口调整大小时使用它。我没有时间测试它，因为我匆忙地输入了这个，但是它应该可以工作。

$('section').each(function(index, element) {
        var leftColumnHeight = $(element).find('.row .col-md-6:first-child').height();
        var rightColumnHeight = $(element).find('.row .col-md-6:last-child').height();

        if(rightColumnHeight > leftColumnHeight){
            $(element).find('.row .col-md-6:first-child').height(rightColumnHeight);
        }

        if(leftColumnHeight > rightColumnHeight){
            $(element).find('.row .col-md-6:last-child').height(leftColumnHeight);
        }
    });

编辑：

我不能留下评论，但我会在这里说，你可以把这个脚本修改成一个函数，并在你喜欢的行上使用它。例如，您可以向要均衡的列添加一个额外的类，例如：

<div class="col-md-6 equal-column"> 

并将脚本更改为这个，因此它适用于任何列，而不仅仅是col-md-6：

 $('section').each(function(index, element) {
            var leftColumnHeight = $(element).find('.row .equal-column:first-child').height();
            var rightColumnHeight = $(element).find('.row .equal-column:last-child').height();

            if(rightColumnHeight > leftColumnHeight){
                $(element).find('.row .equal-column:first-child').height(rightColumnHeight);
            }

            if(leftColumnHeight > rightColumnHeight){
                $(element).find('.row .equal-column:last-child').height(leftColumnHeight);
            }
        });

Answer 2

对两个div使用display:table cell。这样他们的身高就永远一样了。

.row {
  display:table
 }

.col-md-6 {
  display:table-cell
}

Answer 3

这是JSFIDLE。

在页面加载时，我们调用函数findHighestDiv（）。

window.onload = findHighestDiv();

我们用class行遍历每个元素。

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
  }
}

在每一行中，我们有两个div:text和video。

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
    const textDiv = rows[i].querySelectorAll('.text');
    const videoDiv = rows[i].querySelectorAll('.video');
  }
}

要获取这个div的高度，我们使用offsetHeight。

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
    const textDiv = rows[i].querySelectorAll('.text');
    const videoDiv = rows[i].querySelectorAll('.video');
    const textDivHeight = textDiv[0].offsetHeight;
    const videoDivHeight = videoDiv[0].offsetHeight;
  }
}

然后我们比较它们以获得最高高度并使用设置边框style.border右或style.border左。

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
    const textDiv = rows[i].querySelectorAll('.text');
    const videoDiv = rows[i].querySelectorAll('.video');
    const textDivHeight = textDiv[0].offsetHeight;
    const videoDivHeight = videoDiv[0].offsetHeight;
    if (textDivHeight >= videoDivHeight) {
      textDiv[0].style.borderRight = '1px solid gray';
    } else {
      videoDiv[0].style.borderLeft = '1px solid gray';
    }
  }
}

很抱歉，帖子中的代码片段无效idk原因：(