引导井高度相同

Question

我很好地使用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>

我尝试了不同的解决方案，但没有成功。由于其支持较弱，我想避免使用弹性框布局。如果我使用表而不是引导程序列，则会得到相同的结果。如何使用CSS处理这个问题（可能不添加JavaScript）？

jsfiddle

Answer 1

我用这个解决方案来解决这个问题

没有 JavaScript。

我在这个链接上找到了它。

<div class="row row-flex row-flex-wrap">
    //Your well code
</div>

更新

并添加这个css：

.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;
}

希望这会有所帮助。

Answer 2

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);

执行时间：

1. JavaScript： 0.562ms
2. jQuery ：（慢5倍）2.889ms

以下是演示解决方案的代码段：

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);

/* ----- JavaScript ----- */
var
  elements = document.querySelectorAll(".well"),
  heights = [];

[].forEach.call(elements, function(each) {
  heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height");
});

heights.sort(function(a, b) {
  return parseFloat(b) - parseFloat(a);
});

[].forEach.call(elements, function(each) {
  each.style.height = heights[0];
});