我有两个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>
当前回答
我最近遇到了这个问题，我不太喜欢这个解决方案，所以我尝试了一下。
.mydivclass {inline-block;vertical-align:中间;宽度:33%;}
其他回答
我只是想添加到Pavlo描述的伟大的Flexbox解决方案，在我的情况下，我有两个列表/列的数据，我想并排显示之间只有一点间距，水平居中封闭的div.通过在第一个(最左边)flex:1 div内嵌套另一个div，并将其浮动在右边，我得到了我想要的。我找不到任何其他方法来做到这一点，并在所有视口宽度上取得一致的成功:
<div style="display: flex;">
<div style="flex: 1; padding-right: 15px;">
<div style="float: right">
<!-- My Left-hand side list of stuff -->
</div>
</div>
<div style="flex: 1; padding-left: 15px;">
<!-- My Right-hand side list of stuff -->
</div>
</div>
在寻找这个答案的时候发现了这个帖子。我刚刚做了一个小jQuery函数，希望这有助于，工作就像一个魅力:
JAVASCRIPT
var maxHeight = 0;
$('.inner').each(function() {
maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});
HTML
<div class="lhs_content">
<div class="inner">
Content in here
</div>
</div>
<div class="rhs_content">
<div class="inner">
More content in here
</div>
</div>
使用jQuery
使用jQuery，您可以在一个超级简单的单行脚本中完成这个任务。
// HTML
<div id="columnOne">
</div>
<div id="columnTwo">
</div>
// Javascript
$("#columnTwo").height($("#columnOne").height());
使用CSS
这个更有趣一点。这种技术被称为人造柱。或多或少，你并没有设置实际的高度，但你设置了一些图形元素，让它们看起来一样高。
我喜欢使用伪元素来实现这一点。你可以使用它作为内容的背景，让它们填充空间。
使用这些方法，您可以设置列之间的边距，边框等。
.wrapper{ position: relative; width: 200px; } .wrapper:before, .wrapper:after{ content: ""; display: block; height: 100%; width: 40%; border: 2px solid blue; position: absolute; top: 0; } .wrapper:before{ left: 0; background-color: red; } .wrapper:after{ right: 0; background-color: green; } .div1, .div2{ width: 40%; display: inline-block; position: relative; z-index: 1; } .div1{ margin-right: 20%; } <div class="wrapper"> <div class="div1">Content Content Content Content Content Content Content Content Content </div><div class="div2">Other</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/
