blocks|key|658849|text|试试这样的东西(虽然不是很优雅)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|658850|$('.well').css({
++++'height':+$('.well').height()
});|code-block|syntax|javascript|658851|当选择多个元素时，jQuerys+height()方法返回最高值。|offset|length|style|CODE|658852|请参阅jsFiddle：http://jsfiddle.net/4HxVT/|658853|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4HxVT/^0|0|0|H|8|0|C|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>Try something like this (not very elegant, though):</p>

<pre><code>$('.well').css({
    'height': $('.well').height()
});
</code></pre>

<p>The jQuerys <code>height()</code> method returns the highest value when multiple elements are selected.</p>

<p>See the jsFiddle:
<a href="http://jsfiddle.net/4HxVT/">http://jsfiddle.net/4HxVT/</a></p>


blocks|key|444488|text|jQuery的height()方法返回“匹配元素集合中的第一个元素”的值。http://jsfiddle.net/4HxVT/中的答案只起作用，因为行中的第一个元素也是最高的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|444489|这是另一个基于jQuery的解决方案：|444490|http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/|444491|(通过这个答案：https://stackoverflow.com/a/526316/518535)|444492|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4HxVT/|1|2|https://stackoverflow.com/a/526316/518535^0|11|Q|0|0|0|0|1V|1|0|8|15|2|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|J|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|G]]|S|$5|M|N|O|C|$P|T]]]]

<p>jQuery's height() method returns the value of the "first element in the set of matched elements". The answer in <a href="http://jsfiddle.net/4HxVT/" rel="nofollow noreferrer">http://jsfiddle.net/4HxVT/</a> only works because the first element in the row is also the highest.</p>

<p>Here's another jQuery based solution:</p>

<p><a href="http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/" rel="nofollow noreferrer">http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/</a></p>

<p>(Via this answer: <a href="https://stackoverflow.com/a/526316/518535">https://stackoverflow.com/a/526316/518535</a>)</p>


blocks|key|658931|text|在已经给出的答案的基础上，我刚刚使用jquery和underscore解决了这个问题。下面的代码片段将我的井的高度和警报显示在给定行上，而不管最高的出现在哪里：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|658932|$('.well,+.alert').height(function+()+{
++++var+h+=+_.max($(this).closest('.row').find('.well,+.alert'),+function+(elem,+index,+list)+{
++++++++return+$(elem).height();
++++});
++++return+$(h).height();
});|code-block|syntax|javascript|658933|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.com/|1|http://documentcloud.github.com/underscore/^0|I|6|0|P|A|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

<p>Expanding upon the answers already given, I have just solved this using <a href="http://jquery.com/" rel="nofollow">jquery</a> and <a href="http://documentcloud.github.com/underscore/" rel="nofollow">underscore</a>. The snippet below equalizes the height of my wells and alerts that appear on a given row, regardless of where the tallest one appears:</p>

<pre><code>$('.well, .alert').height(function () {
    var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) {
        return $(elem).height();
    });
    return $(h).height();
});
</code></pre>


blocks|key|658959|text|$.fn.matchHeight+=+function()+{
++var+max+=+0;

++$(this).each(function(i,+e)+{
++++var+height+=+$(e).height();
++++max+=+height+>+max+?+height+:+max;
++});

++$(this).height(max);
};

$('.match-height').matchHeight();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|658960|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$.fn.matchHeight = function() {
  var max = 0;

  $(this).each(function(i, e) {
    var height = $(e).height();
    max = height &gt; max ? height : max;
  });

  $(this).height(max);
};

$('.match-height').matchHeight();
</code></pre>


blocks|key|658951|text|我用一个定制的jQuery+max插件解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|658952|$.fn.max+=+function(selector)+{+
++++return+Math.max.apply(null,+this.map(function(index,+el)+{+return+selector.apply(el);+}).get()+);+
}|code-block|syntax|javascript|658953|这里content-box是我的内部column元素，content-container是包含列的包装器：|658954|$('.content-box').height(function+()+{
++var+maxHeight+=+$(this).closest('.content-container').find('.content-box')
++++++++++++++++++.max(+function+()+{
++++++++++++++++++++return+$(this).height();
++++++++++++++++++});
++return+maxHeight;
})|658955|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I solved this with a custom jQuery max plugin:</p>

<pre><code>$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() ); 
}
</code></pre>

<p>Here content-box is my internal column element, content-container is the wrapper that contains the columns:</p>

<pre><code>$('.content-box').height(function () {
  var maxHeight = $(this).closest('.content-container').find('.content-box')
                  .max( function () {
                    return $(this).height();
                  });
  return maxHeight;
})
</code></pre>


blocks|key|659000|text|在你添加漂亮的启动按钮之前，上面的解决方案都是有效的！我想你是怎么定位按钮的(是的，这就是我的问题)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|659001|我将CSS与来自How+might+I+force+a+floating+DIV+to+match+the+height+of+another+floating+DIV?的jquery答案结合起来。|offset|length|659002|过了一会儿，我得到了这个，它在CSS下工作，尽管按钮不对齐，在jQuery上也没问题。|659003|可以随意修改CSS按钮的排列方式:)|659004|jQuery：|659005|$.fn.equalHeights+=+function+(px)+{
++++$(this).each(function+()+{
++++++++var+currentTallest+=+0;
++++++++$(this).children().each(function+(i)+{
++++++++++++if+($(this).height()+>+currentTallest)+{
++++++++++++++++currentTallest+=+$(this).height();
++++++++++++}
++++++++});
++++++++if+(!px+&&+Number.prototype.pxToEm)+{
++++++++++++currentTallest+=+currentTallest.pxToEm();+//use+ems+unless+px+is+specified
++++++++}
++++++++//+for+ie6,+set+height+since+min-height+isn't+supported
++++++++if+($.browser.msie+&&+$.browser.version+==+6.0)+{
++++++++++++$(this).children().css({
++++++++++++++++'height':+currentTallest
++++++++++++});
++++++++}
++++++++$(this).children().css({
++++++++++++'min-height':+currentTallest+%2B+40+//+THIS+IS+A+FRIG+-+works+for+jquery+but+doesn't+help+CSS+only
++++++++});
++++});
++++return+this;
};

$(document).ready(function()+{
++++var+btnstyle+=+{
++++position+:+'absolute',
++++bottom+:+'5px',
++++left+:+'10px'
++++};
++++$('.btn').css(btnstyle);
++++var+colstyle+=+{
++++marginBottom+:+'0px',
++++paddingBottom+:+'0px',
++++backgroundColor+:+'#fbf'
++++};
++++$('.col').css(colstyle);++++
++++$('.row-fluid').equalHeights();
});|code-block|syntax|javascript|659006|CSS|659007|.col+{
++++margin-bottom:+-99999px;
++++padding-bottom:+99999px;
++++background-color:#ffb;
++++position:relative;
}
.col-wrap+{
++++overflow:+hidden;+
}

.btn{
+++margin-left:10px+;+++
}
p:last-child+{
+margin-bottom:20px+;+++
}|659008|jsfiddle+-+http://jsfiddle.net/brianlmerritt/k8Bkm/|659009|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/526294/how-might-i-force-a-floating-div-to-match-the-height-of-another-floating-div/526316|1|http://jsfiddle.net/brianlmerritt/k8Bkm/^0|0|8|25|0|0|0|0|0|0|0|0|B|14|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1E|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1G|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1H|8|@]|9|@$D|1I|E|1J|1|1K]]|A|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

<p>The above solutions all work until you add nice bootstrap buttons!  How do you position buttons I thought (yes, that was my problem).</p>

<p>I combined the CSS with the jquery answer from <a href="https://stackoverflow.com/questions/526294/how-might-i-force-a-floating-div-to-match-the-height-of-another-floating-div/526316">How might I force a floating DIV to match the height of another floating DIV?</a></p>

<p>After a bit of frigging I got this, which works with CSS although the buttons don't line up, and is fine with jQuery</p>

<p>Feel free to fix the CSS button line up bit :)</p>

<p>jQuery:</p>

<pre><code>$.fn.equalHeights = function (px) {
    $(this).each(function () {
        var currentTallest = 0;
        $(this).children().each(function (i) {
            if ($(this).height() &gt; currentTallest) {
                currentTallest = $(this).height();
            }
        });
        if (!px &amp;&amp; Number.prototype.pxToEm) {
            currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
        }
        // for ie6, set height since min-height isn't supported
        if ($.browser.msie &amp;&amp; $.browser.version == 6.0) {
            $(this).children().css({
                'height': currentTallest
            });
        }
        $(this).children().css({
            'min-height': currentTallest + 40 // THIS IS A FRIG - works for jquery but doesn't help CSS only
        });
    });
    return this;
};

$(document).ready(function() {
    var btnstyle = {
    position : 'absolute',
    bottom : '5px',
    left : '10px'
    };
    $('.btn').css(btnstyle);
    var colstyle = {
    marginBottom : '0px',
    paddingBottom : '0px',
    backgroundColor : '#fbf'
    };
    $('.col').css(colstyle);    
    $('.row-fluid').equalHeights();
});
</code></pre>

<p>CSS</p>

<pre><code>.col {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#ffb;
    position:relative;
}
.col-wrap {
    overflow: hidden; 
}

.btn{
   margin-left:10px ;   
}
p:last-child {
 margin-bottom:20px ;   
}
</code></pre>

<p>jsfiddle - <a href="http://jsfiddle.net/brianlmerritt/k8Bkm/" rel="nofollow noreferrer">http://jsfiddle.net/brianlmerritt/k8Bkm/</a></p>


blocks|key|659051|text|这是我的2列解决方案(适应更多的列很简单，只需添加更多的条件)。在load事件上运行，以获得所有元素的正确高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|659052|$(window).on('load',+function+()+{+
++++var+left+=+$('.left');
++++var+leftHeight+=+left.height();
++++var+right+=+$('.right');
++++var+rightHeight+=+right.height();

++++//+Width+like+mobile,+the+height+calculation+is+not+needed
++++if+($(window).width()+<=+751)
++++{
++++++++if+(leftHeight+>+rightHeight)+{
++++++++++++right.css({
++++++++++++++++'height':+'auto'
++++++++++++});
++++++++}
++++++++else+{
++++++++++++left.css({
++++++++++++++++'height':+'auto'
++++++++++++});
++++++++}

++++++++return;
++++}

++++if+(leftHeight+>+rightHeight)+{
++++++++right.css({
++++++++++++'height':+leftHeight
++++++++});
++++}
++++else+{
++++++++left.css({
++++++++++++'height':+rightHeight
++++++++});
++++}
});

<div+class="row">
++++<div+class="span4+left"></div>
++++<div+class="span8+right"></div>
</div>|code-block|syntax|javascript|659053|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is my solution with 2 columns (adapt this to more columns is simple, just add more conditions).
Run on the load event to have the correct heights of all elements.</p>

<pre><code>$(window).on('load', function () { 
    var left = $('.left');
    var leftHeight = left.height();
    var right = $('.right');
    var rightHeight = right.height();

    // Width like mobile, the height calculation is not needed
    if ($(window).width() &lt;= 751)
    {
        if (leftHeight &gt; rightHeight) {
            right.css({
                'height': 'auto'
            });
        }
        else {
            left.css({
                'height': 'auto'
            });
        }

        return;
    }

    if (leftHeight &gt; rightHeight) {
        right.css({
            'height': leftHeight
        });
    }
    else {
        left.css({
            'height': rightHeight
        });
    }
});

&lt;div class="row"&gt;
    &lt;div class="span4 left"&gt;&lt;/div&gt;
    &lt;div class="span8 right"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>


<p>Does bootstrap 2.0 have any helpers to make .span1, .span2 .... .span12 equal height. I've nested this type of html</p>

<pre><code>&lt;div class='container'&gt;
  &lt;div class='row'&gt;
    &lt;div class='span2'&gt;
      &lt;div class='well'&gt;
        XXXX
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='span2'&gt;
      &lt;div class='well'&gt;
        XXXX
        XXXX
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='span2'&gt;
      &lt;div class='well'&gt;
        XXXX
        XXXX
        XXXX
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I would like each well to end up the same height if possible?</p>


Using twitter bootstrap 2.0 - How to make equal column heights?

jQuery

Bootstrap2.0有没有任何帮助程序来制作.span1、.span2…….span12等高。我嵌套了这种类型的html<div class='container'>  <div class='row'>    <div class='span2'>      <div class='well'>        XXXX      </div>    </div>    <div class=

问使用twitter bootstrap 2.0 -如何使列高度相等？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用twitter bootstrap 2.0 -如何使列高度相等？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用twitter bootstrap 2.0 -如何使列高度相等？
EN