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 =＆＃34; col-md-6＆＃34;）是最高的，而在其他情况下是文本div（class =＆＃34; col-md-6＆＃34;）是最高的。（例如，当您在平板电脑上查看时）

确定最高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

这是jsfiddle。

在页面加载时，我们调用函数findHighestDiv()。

window.onload = findHighestDiv();

我们使用类row循环遍历每个元素。

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}的height，我们会使用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;
  }
}

然后我们将它们与highest height进行比较并使用style.borderRight或style.borderLeft设置边框。

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为什么:(

Answer 2

对两个div使用display:table-cell。那样他们总是在同一个高度。

.row {
  display:table
 }

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

Answer 3

您可以尝试使用此脚本。它会均衡您的列，因此您可以为任何列赋予边框，这并不重要。您也可以将它放在一个函数中，并在每次调整窗口大小时使用它。我没有时间对它进行测试，因为我急于打字，但它应该可以工作。

$('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); } });

我怎样才能获得Bootstrap行中最高的div

3 个答案: