我有两个div元素并排。我希望它们的高度是相同的，并保持不变，如果其中一个调整大小。如果其中一个增长是因为放入了文本，那么另一个也应该增长以匹配高度。不过我还是搞不懂这个。什么好主意吗?
<div style="overflow: hidden"> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> </div> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content! </div> </div>
当前回答
Flexbox
对于flexbox，它是一个单一的声明:
.row { 显示:flex;/*儿童身高相等*/ ｝ .col { flex: 1;/*另外，等于宽度*/ 填充:1 em; 边界:固体; ｝ < div class = "行" > <div class="col">我与你同在，我与你同在</div> <div class="col">我爱你，我爱你，我爱你。</div> .</div> .</div> .</div> < / div >
旧浏览器可能需要前缀，请参阅浏览器支持。
其他回答
我最近遇到了这个问题，我不太喜欢这个解决方案，所以我尝试了一下。
.mydivclass {inline-block;vertical-align:中间;宽度:33%;}
使用jQuery
使用jQuery，您可以在一个超级简单的单行脚本中完成这个任务。
// HTML
<div id="columnOne">
</div>
<div id="columnTwo">
</div>
// Javascript
$("#columnTwo").height($("#columnOne").height());
使用CSS
这个更有趣一点。这种技术被称为人造柱。或多或少，你并没有设置实际的高度，但你设置了一些图形元素，让它们看起来一样高。
这是一个jQuery插件，它为同一行上的所有元素设置相等的高度(通过检查元素的offset.top)。因此，如果你的jQuery数组包含来自多个行(不同的offset.top)的元素，每一行将有一个独立的高度，基于该行最大高度的元素。
jQuery.fn.setEqualHeight = function(){
var $elements = [], max_height = [];
jQuery(this).css( 'min-height', 0 );
// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){
var offset_top = jQuery(el).offset().top;
var el_height = jQuery(el).css('height');
if( typeof $elements[offset_top] == "undefined" ){
$elements[offset_top] = jQuery();
max_height[offset_top] = 0;
}
$elements[offset_top] = $elements[offset_top].add( jQuery(el) );
if( parseInt(el_height) > parseInt(max_height[offset_top]) )
max_height[offset_top] = el_height;
});
// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){
if( jQuery($elements[offset_top]).length > 1 )
jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );
}
};
Flexbox
对于flexbox，它是一个单一的声明:
.row { 显示:flex;/*儿童身高相等*/ ｝ .col { flex: 1;/*另外，等于宽度*/ 填充:1 em; 边界:固体; ｝ < div class = "行" > <div class="col">我与你同在，我与你同在</div> <div class="col">我爱你，我爱你，我爱你。</div> .</div> .</div> .</div> < / div >
旧浏览器可能需要前缀，请参阅浏览器支持。
你可以使用Jquery的等高插件来完成，这个插件使所有的div的高度完全相同。如果其中一个生长了，其他的也会生长。
下面是一个实现示例
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights();
Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400);
Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300);
Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.
这是链接
http://www.cssnewbie.com/equalheights-jquery-plugin/
