Javascript 引导器高度相同

我使用bootstrap类进行装饰。我有两个div，里面有不同数量的条目。有没有可能两个井都填满了它们的父井，并且无论它们包含多少个入口，它们的高度总是相同的

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <strong>Title</strong>
            <div class="well well-sm">
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
                <div>Item 4</div>
                <div>Item 5</div>
                <div>Item 6</div>
            </div>
        </div>
        <div class="col-xs-4">
            <strong>Title</strong>
            <div class="well well-sm">
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
            </div>
        </div>
    </div>
</div>

标题
项目1
项目2
项目3
项目4
项目5
项目6
标题
项目1
项目2
项目3

我尝试了不同的解决方案，但没有成功。我想避免使用flex box布局，因为它的支持较弱。如果我使用表而不是引导列，我会得到相同的结果。我如何使用CSS（可能不添加JavaScript）处理这个问题

---

尝试使用

。行均衡器高度

<div class="row row-eq-height">
... 
</div>

... 

注意这个例子：

---

在您的情况下可能很有用。

如果您具有所需的确切高度大小值，则可以将另一个类设置为divs：

<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <strong>Title</strong>
      <div class="well well-sm test">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
        <div>Item 6</div>
      </div>
    </div>
    <div class="col-xs-4">
      <strong>Title</strong>
      <div class="well well-sm test">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
      </div>
    </div>
  </div>
</div>

它的尺寸是一样的

但是！如果您想使其具有相同的高度，而不具有固定的高度值，那么我认为您需要使用javascript来获得最大的divs高度

举个例子：

我使用jQuery为您制作了一个非常快速的片段，它制作得非常糟糕，我相信有更好、更简单的方法：

var max = 0;
$.each( $('.row > div > div'), function(i, row) {
            var cheight = $(row).height();
            if (cheight > max) {
            max = cheight;
      }
})

$.each( $('.row > div > div'), function(i, row) {
        $(row).height(max);
})

---

我使用此解决方案解决该问题

没有JavaScript

我在车上找到的

---

希望这会有所帮助。

以下是jQuery的答案

var maxHeight=0；
$（“.row”）.each（函数（）{
if（$（this）.height（）>maxHeight）{
maxHeight=$（this.height（）；
}
});
$（“.well”）.高度（最大高度）
。嗯{
边框：1px纯红！重要；
}


标题
项目1
项目2
项目3
项目4
项目5
项目6
标题
项目1
项目2
项目3
项目3
项目3
项目3
JavaScript:

如果您可以使用一点JavaScript，那么以下内容正是您所需要的：

var
  elements = document.querySelectorAll(".well"),
  heights = [];

/* Getting an array with the heights */
[].forEach.call(elements, function(each) {
  heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height");
});

/* Sorting the array to get the greatest value first */
heights.sort(function(a, b) {
  return parseFloat(b) - parseFloat(a);
});

/* Applying the greatest height to each element */
[].forEach.call(elements, function(each) {
  each.style.height = heights[0];
});


jQuery:

相反，如果您使用的是较短的代码，并且您使用了jQuery，那么您可以使用以下代码：

var max;

/* Getting the greatest height */
$(".well").each(function() {
  max = ($(this).height() > max) ? $(this).height() : max;
});

/* Applying the greatest height to each element */
$(".well").height(max);


执行时间：

JavaScript:
0.562ms
jQuery:
2.889ms（~5x较慢）

下面是一个演示解决方案的片段：


/*----JavaScript---*/
变量
elements=document.queryselectoral（“.well”），
高度=[]；
[]forEach.call（元素、函数（每个）{
heights[heights.length]=getComputedStyle（每个，空）。getPropertyValue（“高度”）；
});
高度.排序（函数（a，b）{
返回parseFloat（b）-parseFloat（a）；
});
[]forEach.call（元素、函数（每个）{
each.style.height=高度[0]；
});
/*----CSS-----*/
.嗯{
边框：1px纯蓝！重要；
}

标题
项目1
项目2
项目3
项目4
项目5
项目6
标题
项目1
项目2
项目3
我有一个解决方案，但只使用jQuery而不使用css。我也可以使用jQuery。什么都不用，只需检查每一行并找到最大高度，然后将其设置为。好的类。我还没有回答，因为你提到可能没有javascript。但是如果没有jQuery，您必须使用display flex.place我的答案和完整的代码。看一看。只需添加边框，以确保高度为same@Patrick据我所知，没有办法动态地找出哪个元素是最高的，并将该高度应用于CSS中的组的其余部分。如果您可以使用一些
JavaScript/jQuery
，那么您可以在中找到一些好的解决方案。不幸的是，我不知道最大或最小大小。我想我试着用JavaScript来解决这个问题。我以前见过这种情况，但不幸的是它是基于flexbox布局的。我宁愿选择js解决方案。嗯，很好！我们来定制一个列怎么样？这不是更好吗？我不知道为什么，但在firefox和chrome中，这段代码似乎可以正常工作，但在InternetExplorer中却不行。也许有人有主意了？IE版本11 x64非常好的解决方案@谢谢你：D
.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}

.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}

var
  elements = document.querySelectorAll(".well"),
  heights = [];

/* Getting an array with the heights */
[].forEach.call(elements, function(each) {
  heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height");
});

/* Sorting the array to get the greatest value first */
heights.sort(function(a, b) {
  return parseFloat(b) - parseFloat(a);
});

/* Applying the greatest height to each element */
[].forEach.call(elements, function(each) {
  each.style.height = heights[0];
});

var max;

/* Getting the greatest height */
$(".well").each(function() {
  max = ($(this).height() > max) ? $(this).height() : max;
});

/* Applying the greatest height to each element */
$(".well").height(max);